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

前言

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

结论：网页判断当前是电脑端还是手机(就除了电脑都用pdf.js)，然后用PDFObject和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" );

完整例子

<!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文件、指定渲染位置、脚本调用。
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>
		  &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>
				<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>
					  &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文件在线预览，兼容多浏览器和手机端

前言

正文

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

结尾

猜你喜欢