使用pdf.js显示pdf文件

<script type="text/javascript" src="build/pdf.min.js"></script>
<script type="text/javascript">
PDFJS.workerSrc = ‘build/pdf.worker.min.js‘;
</script>
<script type="text/javascript">
$.fn.showPDF = function(pdfUrl, opt){
	var options = $.extend({
			scale: 1,
			pageNum: 1
		}, opt || {});

	this.each(function(){
		var pdfDoc,
			canvas = document.createElement(‘canvas‘),
			ctx = canvas.getContext(‘2d‘);
		$(this).append(canvas);

		function renderPage(num) {
			pdfDoc.getPage(num).then(function (page) {
				var viewport;
				if( typeof(options.width) == ‘number‘ ){
					viewport = page.getViewport(1);
					options.scale = options.width / viewport.width;
				}
				viewport = page.getViewport(options.scale);
				canvas.height = viewport.height;
				canvas.width = viewport.width;
				var renderContext = {
					canvasContext: ctx,
					viewport: viewport
				};
				page.render(renderContext).promise.then(function () {
					if( $.isFunction(options.afterShow) ){
						options.afterShow();
					}
				});
			});
		}

		if( $.isFunction(options.beforeShow) ){
			options.beforeShow();
		}

		PDFJS.getDocument(pdfUrl).then(function (doc){
			pdfDoc = doc;
			renderPage(options.pageNum);
		});
	});
}

$(function(){
	$(‘.pdfView‘).showPDF(‘1.pdf‘, {width: $(window).width()});
});
</script>

  

PDF.js https://mozilla.github.io/pdf.js/

时间: 2024-11-07 06:00:56

使用pdf.js显示pdf文件的相关文章

fis3+vue+pdf.js制作预览PDF文件或其他

人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠人玫瑰,手留余香呢?终于时候到了...哈哈 首先容我吐槽一番,在大前端的背景下各种框架层出不穷,相对的各种打包工具也应用而生,要说最火的就是webpack了,用户多所以社区相对活跃,团队维护,网上也有各种各样的问题可以轻易搜到从而解决自己的遇到的各种奇葩问题,所以90%的项目都会采用webpack来

vue文件流转换成pdf预览(pdf.js+iframe)

参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/     支持获取文件流到客户端,生成blob地址预览 ViewerJS: http://viewerjs.org/   预览pdf文件,其pdf文件只能url地址 Vue-pdf https://github.com/FranckFreiburger/vue-pdf 会出现空白页( 推荐使用iframe方法 ) 无论从功能.兼容

在web项目中集成pdf.js的默认查看器

pdf.jsMozilla开源的一项用于在HTML5平台上显示pdf文档的技术,Mozilla自己的Firefox浏览器也用了pdf.js来预览pdf,可见应该是一个比较成熟稳定的方案(btw,chrome用的是foxit的技术,国人骄傲啊).当然类似的方案有很多,并且大多都提供了丰富的api,如果你仔细读文档/api,可能会有好的收获,但是Mozilla同时把在Firefox内的查看器也一道开源了,对于大部分定制性不强,只需要浏览的使用场景来说,似乎可以直接"拿来主义",本文就说的是

2016.4.6 WinForm显示PDF两种方法

1.最直接的方法,添加webbrowser控件 webb.Url = new Uri(path);可显示pdf控件. 如果需要在打开时跳转到某页,可用在路径后直接加#page=,例如webb.Url = new Uri("d:\\a.pdf#page=5") 如果设置打开时的放大率,可用webb.Url = new Uri("d:\\a.pdf#page=5&room=120") 这种方法最简单,但在打开后无法控制页面跳转,页面布局等操作. 2.第二种方法,

pdf转为html查看pdf.js

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能)

我是在IE11和谷歌上做的测试,都可以显示,把做出的东西记录下来,方便大家还有自己学习! 可以在IIS7服务器上也可以下载Tomcat来做服务器 Tomcat下载地址   http://pan.baidu.com/s/1dEEUFQD 根据百度经验安装和配置Tomcat   http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html 有关pdf.js的介绍在如下网址   https://github.com/mozilla/pdf

在网页中显示PDF文件及vue项目中弹出PDF

1.<embed width="800" height="600" src="test_pdf.pdf"> </embed>  <embed v-show="pdfShow" width="800" height="600" src="../../../public/data/significant.pdf"> </embed

js直接打印pdf文件内容

(1)需求:是网页上打开一个pdf文件,然后直接打开打印机,就是直接打印,不用用户再次点击打印按钮,这样用户体验好 (2)经历: 我在网上找了资料就是使用window.print(),但是这个只是打印标签的内容,对于pdf的url里面的内容是打印不出的,听说网上有插件pdf.js等等. 感觉也没什么用,最后自己也不知道怎么搞,弄了很久就知道有人用iframe加载pdf再打印所以参考一下就真的可以打印,忽然感觉大神都在灯火阑珊处! (3)主要代码: 标签iframe代码 <iframe style

Android 显示 PDF 文件

1.开源项目地址 : https://github.com/JoanZapata/android-pdfview 2.引用 compile 'com.joanzapata.pdfview:android-pdfview:[email protected]' 3.布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.