pdf文件在线预览，兼容多浏览器和手机端

前言

最近学习了一下网页在线预览pdf文件的实现方式，主要有：
PDFObject：使用起来非常方便，电脑端兼容性好，试过能兼容ie9,也很快，但在手机上一些浏览器无法在线.
jquery.media.js：使用起来非常方便，不支持ie。ie的话可以提示安装插件实现预览点击下载。不支持手机端。而且要写代码判断ie浏览器以及是否已安装插件，jquery.media.js实现预览不做讲解，有需要可以参考：
jquery.media.js 插件实现在线预览PDF文件。
PDF.js：功能强大，使用起来代码相对繁琐一点，能够支持电脑端和手机端，要实现和另外两个一样的效果比较繁杂，本博客只讲简单的使用,如果PDFObject不行就用PDF.js吧。
…

结论：网页判断当前是PC端还是其他终端，用PDFObject实现PC端、PDF.js实现其他终端(除了电脑端都用pdf.js实现)。
本博客只有实现，原理请自行搜索学习，附上参考的博客：
前端预览PDF：PDFObject、PDF.js
在线查看PDF文件,pdf.js使用方法
PDF.js官方例子

正文

PDFObject实现
PDFObject实现非常简单
js下载地址：https://github.com/pipwerks/PDFObject/

1.引入js文件

<script type="text/javascript" src='pdfobject.min.js'></script>

我引入的是pdfobject.min.js。引入pdfobject.js和pdfobject.min.js其中一个就可以。
官方提供了PDFObject.supportsPDFs用于判断当前能否使用PDFObject：

if(PDFObject.supportsPDFs){console.log("PDFObject可以使用，Yes！");
} else {alert("当前不支持PDFObject，抱歉！");
}

2.指定位置显示pdf文件
通过id嵌入。

<body><div id="pdf_viewer"></div>
</body>

3.通过脚本显示

<script type="text/javascript">if(PDFObject.supportsPDFs){// PDF嵌入到网页指定idPDFObject.embed("/mypdf/test.pdf", "#pdf_viewer" );} else {alert("当前不支持哦！返回首页");location.href = "/";}
</script>

值得注意的是，PDFObject.js的embed方法参数不支持包含中文的字符串，如果路径包含中文则不能正确的找到我们的pdf文件。所以需要手动编码,可以类似以下处理:

   //不支持中文，谷歌浏览器能运行,ie浏览器下embed方法则不能正确的找到pdf文件。var pdfurl = "/我.pdf";PDFObject.embed(pdfurl, "#pdf_viewer" );
//-----------------分割线-------------------//乾坤大法var pdfurl = encodeURI("/我.pdf");PDFObject.embed(pdfurl, "#pdf_viewer" );

完整例子

<!DOCTYPE html>
<html>
<head><title>Show PDF</title><meta charset="utf-8" /><script type="text/javascript" src='pdfobject.min.js'></script><style type="text/css">html,body,#pdf_viewer{width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head>
<body><div id="pdf_viewer"></div>
</body>
<script type="text/javascript">if(PDFObject.supportsPDFs){// PDF嵌入到网页PDFObject.embed("index.pdf", "#pdf_viewer" );} else {location.href = "/canvas";}</script>
</html>

PDF.js实现
js下载地址：http://mozilla.github.io/pdf.js/
这里只用到下载文件中的两个js:
pdf.js 和 pdf.worker.js
实现同样分为三个部分：引入js文件、指定渲染位置、脚本调用。记得先看一眼后续（文章最下面）
2019-08-23更新：下面的实现就先不要参考了，版本变了，已经不适用了，去官网看看例子吧
1.引入js

<script type="text/javascript" src="/js/pdf.js"></script>

2.body指定位置

<div id="canvs"style="margin:0px auto"><canvas id="the-canvas" ></canvas><divstyle="text-align: center"><button id="prev" onclick="onPrevPage()">上一页</button><span> <span id="page_num"></span> / <span id="page_count"></span></span><button id="next" onclick="onNextPage()">下一页</button>&nbsp; &nbsp;  </div>
</div>

3.脚本渲染

var url = '/uploadfile/a.pdf';//展示的pdf路径
PDFJS.workerSrc = '/js/pdf.worker.js';//引入js，不引好像也没事。。。
var pdfDoc = null,pageNum = 1,//页码pageRendering = false,//据我观察，是用来应对一时间多次点击下一页按钮的情况的,你可以试试。pageNumPending = null,//取得最新的页码scale = 2.5,//缩放倍数canvas = document.getElementById('the-canvas'),ctx = canvas.getContext('2d');
PDFJS.getDocument(url).then(function(pdfDoc_) {pdfDoc = pdfDoc_;document.getElementById('page_count').textContent = pdfDoc.numPages;renderPage(pageNum);
});
/***以下方法可以提取放到单独js里面去*/
/***渲染当前页*/
function renderPage(num) {pageRendering = true;pdfDoc.getPage(num).then(function(page) {var viewport = page.getViewport(scale);canvas.height = viewport.height;canvas.width = viewport.width;var renderContext = {canvasContext: ctx,viewport: viewport};var renderTask = page.render(renderContext);renderTask.promise.then(function() {pageRendering = false;if (pageNumPending !== null) {renderPage(pageNumPending);pageNumPending = null;}});});document.getElementById('page_num').textContent = num;
}function queueRenderPage(num) {if (pageRendering) {pageNumPending = num;} else {renderPage(num);}
}/***上一页*/
function onPrevPage() {if (pageNum <= 1) {return;}pageNum--;queueRenderPage(pageNum);
}/***下一页*/
function onNextPage() {if (pageNum >= pdfDoc.numPages) {return;}pageNum++;queueRenderPage(pageNum);
}

示范例子，这个是我自己的页面，只作大家参考代码位置用。

<!DOCTYPE html>
<html lang="zh_CN"><head><meta charset="UTF-8"><script src="/js/lib/jquery.min.js"></script><script type="text/javascript" src="/js/pdf.js"></script>
</head>
<body>
<div id="container"><!-- 正文 --><div class="container main"><div class="body"style="width:788px;margin:auto;"><div id="canvs"style="margin:0px auto"><canvas id="the-canvas" ></canvas><divstyle="text-align: center"><button id="prev" onclick="onPrevPage()">上一页</button><span> <span id="page_num"></span> / <span id="page_count"></span></span><button id="next" onclick="onNextPage()">下一页</button>&nbsp; &nbsp;   </div></div></div></div>
</div><script type="text/javascript">$(".ewb-details-bd").css("width","400px");$("#the-canvas").css("width","400px");var url = '/uploadfile/a.pdf';PDFJS.workerSrc = '/js/pdf.worker.js';var pdfDoc = null,pageNum = 1,//页码pageRendering = false,//据我观察，是用来应对一时间多次点击下一页按钮的情况的,你可以试试。pageNumPending = null,//取得最新的页码scale = 2.5,//缩放倍数canvas = document.getElementById('the-canvas'),ctx = canvas.getContext('2d');PDFJS.getDocument(url).then(function(pdfDoc_) {pdfDoc = pdfDoc_;document.getElementById('page_count').textContent = pdfDoc.numPages;renderPage(pageNum);});/***以下方法可以放到js里面去*//***渲染当前页*/function renderPage(num) {pageRendering = true;pdfDoc.getPage(num).then(function(page) {var viewport = page.getViewport(scale);canvas.height = viewport.height;canvas.width = viewport.width;var renderContext = {canvasContext: ctx,viewport: viewport};var renderTask = page.render(renderContext);renderTask.promise.then(function() {pageRendering = false;if (pageNumPending !== null) {renderPage(pageNumPending);pageNumPending = null;}});});document.getElementById('page_num').textContent = num;}function queueRenderPage(num) {if (pageRendering) {pageNumPending = num;} else {renderPage(num);}}/***上一页*/function onPrevPage() {if (pageNum <= 1) {return;}pageNum--;queueRenderPage(pageNum);}/***下一页*/function onNextPage() {if (pageNum >= pdfDoc.numPages) {return;}pageNum++;queueRenderPage(pageNum);}</script>
</body></html>

这里提供一个判断电脑端的方法

function isPC() {var userAgentInfo = navigator.userAgent;var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPod","iPad","iPad Pro"];var flag = true;for (var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {flag = false;break;}}return flag;
}

结尾

总而言之，结合使用PDFObject.js和PDF.js基本能满足所有的在线浏览需求了。
感谢参考原创内容的作者大神们！参考链接已附在前言。
这篇博客是学习后做的使用总结，方便自己以后查阅，如果对你有帮助那最好了。如果本博客有什么错误，请指出，谢谢。

后续

关于PDF.js实现的问题—2019—06—23------------------------------
有看到兄弟评论对我的批评，按照这个方式实现存在页面提示PDFJS不存在的错误，这里说一声抱歉，我自己去官网下载了一下pdf.js 和 pdf.worker.js，用在我给的实例代码中，确实存在这个问题。

后面我又试了一下我以前实现这个pdf预览的文件，总结如下：
1.去pdf.js官网下载最新的js,按照上面的示例是不能成功的，可能是版本问题导致。
2.我之前实现的pdf预览，直接打开html文件也不能做到预览，存在文件跨域的限制。我是在nginx代理服务器基础上实现的pdf文件预览，所以没发现上面的问题，导致浪费了大家的时间，抱歉。
3.之前的文件我这里也上传了一个demo,可以试试nginx或tomcat,我自己试了是可以的。
4.最后声明一下，我也只是涉及到这个需求才记录的，本人并不精通，建议大家在官网网站给的例子上进行实现修改。谢谢！
demo(不是新版的pdf.js)点击我下载。备用百度网盘下载地址：点我,提取码ozis

pdf文件在线预览，兼容多浏览器和手机端相关推荐

html5 pdf.js 使用方法,PDF 文件在线预览(pdf.js 使用教程)
因项目开发需要在线展示 PDF文件,为解决 PDF文件在浏览器打开后电子签章.电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题: pdf.js框架为HTML5,无需任何本地支持,兼 ...
pdfjs-dist 实现pdf文件在线预览
pdfjs-dist 实现pdf文件在线预览实现效果实现过程 (1)安装pdfjs-dist (2)代码部分 (3)原理项目要求实现pdf文件在线预览,并且pdf预览通过上下页滚动pdf,且兼容 ...
vue-pdf实现pdf文件在线预览
1. 前言 PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件 ...
vue 实现pdf文件在线预览
PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下第一种,使用vue-pdf 安装 npm install --save vue-pdf 页面代码 <tem ...
网页中动态嵌入PDF文件/在线预览PDF内容
网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发 ...
java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...
文件被损坏 java_使用PDF.JS实现pdf文件在线预览时，报文件被损坏的错误
首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 ?file=" width="1024" height=" ...
java集成pdf.js实现pdf文件在线预览
最近项目需要实现在线预览pdf文件功能,找来找去,发现有个pdf.js的类库挺好用,直接用js实现在线预览. pdf.js是开源项目,github的地址: https://github.com/moz ...
#网页中动态嵌入PDF文件/在线预览PDF内容#
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

pdf文件在线预览，兼容多浏览器和手机端

前言

正文

值得注意的是，PDFObject.js的embed方法参数不支持包含中文的字符串，如果路径包含中文则不能正确的找到我们的pdf文件。所以需要手动编码,可以类似以下处理:

结尾

后续

pdf文件在线预览，兼容多浏览器和手机端相关推荐

最新文章

热门文章