javascript插件在HTML页面中显示PDF文件【原创】

javascript

2019-01-27

93

0

PDF是我们常用到的一个电子书文件格式,在Windows客户端和手机端我们可以使用Acrobat Reader DC打开,并且在浏览器端好多浏览器都支持直接打开PDF,我今天要告诉大家的是,怎么样在浏览器的页面中部分嵌入PDF.

一、引用JS文件

这里,我们需要引入pdfobject.min.js文件。

<script src="${basePath}/js/pdf/pdfobject.min.js"></script>

该文件下载地址:

https://github.com/pipwerks/PDFObject/

二、页面中加载PDF文件

2.1、在页面中加入如下HTML代码

<div id="pdf" class="panel-body" style="height:100%;width:100%;"></div>

2.2、加入JS代码

function loadPdf(){
	 var options = {
		pdfOpenParams: {
			navpanes: 0,
			toolbar: 0,
			statusbar: "0",
			zoom:100,
			view: "FitH",
			pagemode: "none", 
			page: 2
		}
	};
	var myPDF = PDFObject.embed('PDF文件路径', "#pdf", options);
  }
  window.setTimeout(loadPdf,5000);

这里为什么要加上setTimeout是因为加载PDF文件时,有网络延迟,可能会导致加载失败。

三、支持的浏览器

Chrome, Firefox, Safari (macOS and iOS), IE 9-11, 和 MS Edge

在这里,上面的方法是不支持IE的,如果想支持IE浏览器的话,需要使用如下JS:

var options = {
					pdfOpenParams: {
						navpanes: 0,
						toolbar: 0,
						statusbar: "0",
						zoom:100,
						view: "FitH",
						pagemode: "none", 
						page: 2
					},
					forcePDFJS: true,
					PDFJS_URL: "${basePath}/js/pdf/pdfjs-dist/web/viewer.html"
				};

多了两个配置属性:

forcePDFJS: true,
PDFJS_URL: "${basePath}/js/pdf/pdfjs-dist/web/viewer.html"

不过这里的viever.html页面是火狐浏览器的插件,需要到火狐官网下载,集成到你自己的网站中。

四、最终效果

欢迎访问:www.hongfu951.com博客,查看更多文章

发表评论

全部评论:0条

鸿福951

努力打造一个好用的webui

热评文章

推荐文章