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嵌入到网页指定id
PDFObject.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" );
完整例子
<html>
<head>
<title>Show PDFtitle>
<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>
<div style="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>
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);
}
示范例子，这个是我自己的页面，只作大家参考代码位置用。
<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>
<div style="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>
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