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文件夹，引入路径写法

复制代码

<!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>