前端js实现预览pdf文件
今天项目急需在线预览pdf功能，在网上搜了一堆，整合思路如下：
一、采用PDFObeject.js插件，优点:支持pdf输入打开口令，缺点:不支持手机浏览器
其实就光看这个网站也足够了，http://www.pdfobject.com/。
主要代码：
<script type="text/JavaScript" src="scripts/pdfobject/pdfobject.js"></script>
<script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "/Path/dianzihuikan.pdf" ,pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'}}).embed("pdf1");
};
</script>
<div id="pdf1" style="width:700px; height:600px;">It appears you don't have Adobe Reader or PDF support in this web browser. <a href="~/pdf/CGVET22-08-2011V2P.pdf">Click here to download the PDF</a></div>
二、采用touchPDF.js插件，实现手机端预览pdf文件，缺点：pdf不能设置打开口令，否则js报错passwordException，上网未找到解决办法
主要参考该代码 https://github.com/loicminghetti/touchpdf
主要代码：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pdf.compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.js"></script>
<script type="text/javascript" src="jquery.panzoom.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.touchPDF.js"></script>
<link href="jquery.touchPDF.css" rel="stylesheet" media="screen" />
</head>
<body> <div id="myPDF"></div>
</body>
<script type="text/javascript">
$(function() {
$("#myPDF").pdf( { source: "/Path/dianzihuikan.pdf" } );
});
</script>
这里遇到的问题是ios设备无法显示，解决办法是
// + 新增代码，- 去除代码 ，否则是原内容不变，大概在471行
// 原文出处https://github.com/godwin668/pdf.js/commit/f244fd867895d37438fe4a021225be037440ccb4
var isChromeWithRangeBug = /Chrome\/(39|40)\./.test(navigator.userAgent);
+
+ var isIPhone = /iPhone/.test(navigator.userAgent);
+ var isIPad = /iPad/.test(navigator.userAgent);
+ var isWeChat = /micromessenger/.test(navigator.userAgent);
- if (isSafari || isOldAndroid || isChromeWithRangeBug) {
+ if (isSafari || isOldAndroid || isChromeWithRangeBug || isIPhone || isIPad || isWeChat) {
PDFJS.disableRange = true;
PDFJS.disableStream = true;
}
修改后即可在ios设备中正常访问。
