前端js实现预览pdf文件

最新推荐文章于 2024-09-18 09:47:44 发布

独正己身

最新推荐文章于 2024-09-18 09:47:44 发布

阅读量1.6w

点赞数

分类专栏：前端 jsp ajax thymeleaf

本文链接：https://blog.csdn.net/u012149181/article/details/81841781

版权

前端 jsp ajax thymeleaf 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

今天项目急需在线预览pdf功能，在网上搜了一堆，整合思路如下：

一、采用PDFObeject.js插件，优点:支持pdf输入打开口令，缺点:不支持手机浏览器

其实就光看这个网站也足够了，http://www.pdfobject.com/。

主要代码：

二、采用touchPDF.js插件，实现手机端预览pdf文件，缺点：pdf不能设置打开口令，否则js报错passwordException，上网未找到解决办法

主要参考该代码 https://github.com/loicminghetti/touchpdf

主要代码：

<head>

</head>

<body>

<div id="myPDF"></div>

</body>

<script type="text/javascript">
  $(function() {
    $("#myPDF").pdf( { source: "/Path/dianzihuikan.pdf" } );
  });
</script>

这里遇到的问题是ios设备无法显示，解决办法是

修改 pdf.compatibility.js

// + 新增代码，- 去除代码，否则是原内容不变，大概在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设备中正常访问。