vue2实现pdf预览兼容低版本浏览器
一、背景
浏览器chrome 58版本、vue2项目、pdf预览
二、踩坑
一开始使用的是vue-pdf（版本4.1.0，依赖pdfjs-dist版本2.4.456）实现pdf预览，在高版本浏览器可以正常预览，但是在低版本浏览器样式错乱
三、解决方案
TouchPDF是一个简单的 jQuery Web PDF 查看器。它基于pdf.js库，支持滑动页面和缩放的移动手势。
1.特征
- 用手指滑动到下一页或上一页
- 捏合以放大和缩小
- 点击指向文档部分或外部 URL 的链接
- 添加彩色选项卡以快速访问书签页面
- 直接在 DOM 中加载，无需 iFrame
2.支持的浏览器
Firefox、Chrome、Opera、IE >= 9、Safari、Android 浏览器
3.开始
jQuery 插件 要获取插件的本地副本，请使用 git 克隆它：
git clone https://github.com/loicminghetti/touchpdf.git
注意：您需要启动本地 Web 服务器，因为某些浏览器不允许打开 file:// url 的 PDF 文件。
将以下内容添加到文档的<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<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" /> vue项目中外部引入的静态资源可以放在public文件夹下，建lib或者plugins文件夹，引入路径写法
<script type="text/javascript" src="plugins/touchPDF/jquery.touchPDF.js"></script>
<!DOCTYPE html>
<html><head><!-- 其他head内容 --><link rel="stylesheet" href="<%= BASE_URL %>lib/touchPDF/touchPDF.css"></head><body><div id="app"></div><!-- 先引入jQuery --><script src="<%= BASE_URL %>lib/jquery/jquery.min.js"></script><!-- 再引入touchPDF --><script src="<%= BASE_URL %>lib/touchPDF/touchPDF.js"></script></body>
</html>在文档中添加一个空 div，该 div 将包含 PDF 查看器
<div id="myPDF"></div>
通过在文档末尾添加以下脚本来加载 PDF 文件
<script type="text/javascript">$(function() {$("#myPDF").pdf( { source: "yourfile.pdf",loaded:loaded方法} );});
</script>
您还可以将书签选项卡添加到 PDF 显示中：
$(function() { $("#myPDF").pdf( {source: "demo.pdf",tabs: [{title: "Tab 1", page: 2, color: "orange"},{title: "Tab 2", page: 3, color: "green"},{title: "Tab 3", page: 5, color: "blue"},]});
});
Viewer 选项
| 选择 | 类型 | 违约 | 描述 |
|---|---|---|---|
| 源 | 字符串 | " " | 要显示的 PDF 文件的路径。 |
| 标题 | 字符串 | “触摸PDF” | 要在工具栏中显示的 PDF 的标题。 |
| 制表符 | 数组 | [ ] | 要在侧面显示的选项卡数组。语法见下文。 |
| 选项卡颜色 | 字符串 | “米色” | 所有选项卡的默认背景颜色。可用颜色有“绿色”、“黄色”、“橙色”、“棕色”、“蓝色”、“白色”、“黑色”，您可以使用 CSS 定义自己的颜色。 |
| 禁用缩放 | 布尔 | 假 | 禁用 PDF 文档的缩放。默认情况下，可以使用滚动、两根手指捏合、+/- 键和工具栏按钮来缩放 PDF。 |
| 禁用滑动 | 布尔 | 假 | 禁用滑动到 PDF 文档的下一页/上一页。默认情况下，可以使用一根手指滑动 PDF。 |
| 禁用链接 | 布尔 | 假 | 禁用 PDF 文档上的所有内部和外部链接。 |
| disableKeys | 布尔 | 假 | 禁用下一页/上一页的箭头键和缩放的 +/- 键（如果启用了缩放）。 |
| 重新绘制窗口调整大小 | 布尔 | 真 | 在窗口调整大小时强制调整 PDF 查看器的大小。 |
| pdf比例 | 浮 | 1 | 定义 PDF 页面大小与选项卡大小之间的比率。 |
| 质量 | 浮 | 2 | 设置加载的 PDF 页面的质量比率。设置为 2，当用户放大到 200% 时显示清晰。 |
| 显示工具栏 | 布尔 | 真 | 在文档顶部显示一个工具栏，其中包含标题、页码以及下一页/上一页和缩放的按钮。 |
| 加载 | 功能 | 零 | 加载 PDF 文档时（显示第一页之前）触发的处理程序。 |
| 改变 | 功能 | 零 | 每次显示新页面时触发的处理程序。 |
| 加载HTML | 字符串 | “正在加载 PDF” | 在加载文档之前显示在白页上的文本或 HTML。 |
| 加载高度 | 整数 | 841 | 加载文档之前显示的白页高度（以像素为单位）（默认为 A4 高度）。 |
| loadingWidth （加载宽度） | 整数 | 595 | 加载文档前显示的白页宽度（以 px 为单位）（默认为 A4 宽度）。 |
Tab 属性
必须使用具有以下属性的 json 对象定义每个选项卡：
| 属性 | 类型 | 违约 | 描述 |
|---|---|---|---|
| 标题 | 字符串 | 命令的 | 要在选项卡上显示的文本。少于 3 个字符的文本将水平显示，较长的文本将垂直显示。 |
| 页 | 整数 | 命令的 | 要链接的 PDF 文档页码。页码从 1 开始。 |
| 颜色 | 字符串 | 如查看器中所定义 | 为选项卡设置不同的颜色。有关可用颜色，请参阅上文。 |
| 抵消 | 整数 | 0 | 用小偏移量填充标签，以便用户知道后面有隐藏的标签。从 0 开始。 |
| 返回页首 | 整数 | 定义 | 将选项卡从PDF文档顶部对齐给定的像素数。默认情况下，选项卡一个接一个地放置。 |
| 底 | 整数 | 定义 | 将选项卡从PDF文档底部按给定的像素数对齐。 |
| 高度 | 整数 | 定义 | 为选项卡设置特定高度。默认情况下，制表符高度将取决于标题中的字符数。 |
四、使用注意事项
1.配置项中loaded设置加载页码页面，loaded需是一个方法，用来返回展示页码。
2.如果需要关闭鼠标缩放pdf功能，配置项中设置disableZoom为true（touchPDF文件夹下的jquery.touchPDF.js中可看到配置项字段）。同时需要隐藏工具栏中的缩小放大按钮，可以用css样式隐藏。
3.在项目中html引入css依赖时，可能会影响全局样式，需要将css文件单独放在使用pdf的页面。
vue页面写法
<template><div class="pdf-container"><link href="plugins/touchPDF/jquery.touchPDF.css" rel="stylesheet" media="screen" /><!-- 内容 --><div class="content"></div></div>
</template>