【Vue】vue中使用pdf，看这篇就够了~

旧城等待， 2022-12-22 00:46 280阅读 0赞

# 1. 需求 #

最近接到一个需求，需要在 vue 的 pc 端中嵌入用户帮助手册的PDF文件，且由于是保密文件，因此禁止用户进行打印、下载等相关操作。需要实现出来的需求点如下：

*  PDF展示
 *  每一页进行懒加载（或用进度条加载给与用户反馈）
 *  禁止打印、下载PDF（或加大用户打印、下载文件的难度成本）

# 2. PDF 组件选型 #

通过查找资料，主流的可以找到的有如下几种方案，其中最为成熟的方案是 vue-pdf

*  [vue-pdf 官方文档][vue-pdf]：较为完善的 vue-PDF 解决方案。
 *  [vueshowpdf][]：网络上找到的一个他人封装的PDF组件。
 *  `pdf.js`：许多博客推荐使用该底层 js 去实现，但是我发现官方文档进不去，时间有限便舍弃该方案，在下方方案对比不再列出。
 *  `iframe` / `object`/ `embed`：在 w3school 中便可搜到。

### 2.1 各方案对比 ###

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>优点</th> 
   <th>缺点</th> 
   <th>原理</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>iframe</code> / <code>object</code>/ <code>embed</code></td> 
   <td>简单易用<br>包含了打印、翻页、缩放等内嵌功能</td> 
   <td>无法禁止打印</td> 
   <td>将 pdf 作为插件内嵌在这三个HTML标签内</td> 
  </tr> 
  <tr> 
   <td><code>vueshowpdf</code></td> 
   <td>样式简单清爽<br>包含翻页、缩放功能<br>可以禁止打印</td> 
   <td>在不修改源码的情况下无法自定义相关样式；<br>无进度加载提示，加载完成前会出现白屏</td> 
   <td>基于底层 pdf.js 实现</td> 
  </tr> 
  <tr> 
   <td><code>vue-pdf</code></td> 
   <td>样式组件可自定义<br>包含加载进度、翻页、页内元素可交互等</td> 
   <td>固定宽高的比例，需要将包裹 PDF 的父容器尽可能调大才能显示完全</td> 
   <td>基于 pdf.js 实现</td> 
  </tr> 
 </tbody> 
</table>

那么对比完来一个总结，你也可以直接看这里：

*  如果只想`简单在页面中嵌套 PDF`，使用 `iframe / object / embed` 是最好的选择，它不需要你自己去编写翻页组件、不需要去调整样式，用户体验佳。
 *  如果对`样式没有定制化`的需求，使用 `vueshowpdf` 也是非常不错，弹窗式的 UI 看起来会更加高大上。
 *  如果对`权限控制、样式定制需求较高`，使用 `vue-pdf` 是最好的选择，接口和属性较全，扩展能力强，自由度高。

### 2.2 各方案简单实现代码示例 ###

**`1）iframe / object / embed`**

`iframe` / `object` / `embed` 使用方法和效果都同理，如下以 iframe 为例  
  这边没有截图就不放上来了，效果就如同直接用链接打开 pdf 文件是一样的，相当于一个新的页面内嵌在当前页面中。

**`2）vueshowpdf`**

效果  
![包括翻页、缩放][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70_pic_center]

安装

npm install vueshowpdf -S

使用

<template>
      <div class="container">
        <button @click="openpdf">打开pdf</button>
        <vueshowpdf @closepdf="closepdf"
                    v-model="isshowpdf"
                    :pdfurl="src"
                    @pdferr="pdferr"
                    :maxscale='4'
                    :minscale='0.6'
                    :scale='1.0'></vueshowpdf>
      </div>
    </template>
    
    <script>
    import vueshowpdf from 'vueshowpdf'
    export default { 
      components: { 
        vueshowpdf
      },
      data () { 
        return { 
          src: '/static/test1.pdf',
          isshowpdf: false
        }
      },
      methods: { 
        closepdf () { 
          this.isshowpdf = false
        },
        pdferr (errurl) { 
          console.log(errurl)
        },
        openpdf () { 
          this.isshowpdf = true
        }
      }
    }
    </script>
    
    <style scoped>
    .container { 
      font-family: PingFang SC;
      width: 100%;
    }
    </style>

**`3）vue-pdf`**

效果  
  与 vueshowpdf 不同在于，vueshowpdf 是弹窗展示，而 vue-pdf 是直接在页面上展示  
![vue-pdf 效果展示][vue-pdf 1]  
安装

npm install --save vue-pdf

使用

<template>
      <div class="container">
        <pdf src="/static/test1.pdf"></pdf>
      </div>
    </template>
    
    <script>
    import pdf from 'vue-pdf'
    export default { 
      components: { 
        pdf
      }
    }
    </script>
    
    <style scoped>
    .container { 
      font-family: PingFang SC;
      width: 100%;
      height: 500px;
    }
    </style>

# 3. vue-pdf 完整代码 #

对于代码的用途均在下列代码中，优化了交互过程内容有：

*  切换页面时，页面（滚动条）自动回到顶部
 *  在页码小于等于1或等于最大页数时，上一页和下一页按钮分别禁用
 *  页码输入框限制了输入范围
 *  使用了 ElementUI 的 Progress 进度条组件来展示加载进度

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70_pic_center 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70_pic_center 2]

<template>
      <div id="container">
        
        <div class="right-btn">
          
          <div class="pageNum">
            <input v-model.number="currentPage" type="number" class="inputNumber" @input="inputEvent()"> / {
       {pageCount}}
          </div>
          <div @click="changePdfPage('first')" class="turn">
            首页
          </div>
    	  
          <div @click="changePdfPage('pre')" class="turn-btn" :style="currentPage===1?'cursor: not-allowed;':''">
            上一页
          </div>
          <div @click="changePdfPage('next')" class="turn-btn" :style="currentPage===pageCount?'cursor: not-allowed;':''">
            下一页
          </div>
          <div @click="changePdfPage('last')" class="turn">
            尾页
          </div>
        </div>
    
        <div class="pdfArea">
          <pdf :src="src" ref="pdf" v-show="loadedRatio===1" :page="currentPage" @num-pages="pageCount=$event" @progress="loadedRatio = $event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" @link-clicked="currentPage = $event" style="display: inline-block;width:100%" id="pdfID"></pdf>
        </div>
        
        <div class="progress" v-show="loadedRatio!==1">
          <el-progress type="circle" :width="70" color="#53a7ff" :percentage="Math.floor(loadedRatio * 100)"></el-progress>
          <br>
          
          <span>{
       {remindShow}}</span>
        </div>
      </div>
    </template>
    
    <script> import pdf from 'vue-pdf' export default { components: { pdf }, computed: { }, created () { this.prohibit() }, destroyed () { // 在页面销毁时记得清空 setInterval clearInterval(this.intervalID) }, mounted () { // 更改 loading 文字 this.intervalID = setInterval(() => { this.remindShow === this.remindText.refresh ? this.remindShow = this.remindText.loading : this.remindShow = this.remindText.refresh }, 4000) // 监听滚动条事件 this.listenerFunction() }, data () { return { // ----- loading ----- remindText: { loading: '加载文件中，文件较大请耐心等待...', refresh: '若卡住不动，可刷新页面重新加载...' }, remindShow: '加载文件中，文件较大请耐心等待...', intervalID: '', // ----- vuepdf ----- // src静态路径: /static/xxx.pdf // src服务器路径: 'http://.../xxx.pdf' src: '你的pdf路径', // 当前页数 currentPage: 0, // 总页数 pageCount: 0, // 加载进度 loadedRatio: 0 } }, methods: { // 监听滚动条事件 listenerFunction (e) { document.getElementById('container').addEventListener('scroll', true) }, // 页面回到顶部 toTop () { document.getElementById('container').scrollTop = 0 }, // 输入页码时校验 inputEvent () { if (this.currentPage > this.pageCount) { // 1. 大于max this.currentPage = this.pageCount } else if (this.currentPage < 1) { // 2. 小于min this.currentPage = 1 } }, // 切换页数 changePdfPage (val) { if (val === 'pre' && this.currentPage > 1) { // 切换后页面回到顶部 this.currentPage-- this.toTop() } else if (val === 'next' && this.currentPage < this.pageCount) { this.currentPage++ this.toTop() } else if (val === 'first') { this.currentPage = 1 this.toTop() } else if (val === 'last' && this.currentPage < this.pageCount) { this.currentPage = this.pageCount this.toTop() } }, // pdf加载时 loadPdfHandler (e) { // 加载的时候先加载第一页 this.currentPage = 1 }, // 禁用鼠标右击、F12 来禁止打印和打开调试工具 prohibit () { // console.log(document) document.oncontextmenu = function () { return false } document.onkeydown = function (e) { if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) { return false } if (e.keyCode === 18 || e.keyCode === 123) { return false } } } } } </script>
    
    <style scoped> #container { overflow: auto; height: 800px; font-family: PingFang SC; width: 100%; display: flex; /* justify-content: center; */ position: relative; } /* 右侧功能按钮区 */ .right-btn { position: fixed; right: 5%; bottom: 15%; width: 120px; display: flex; flex-wrap: wrap; justify-content: center; z-index: 99; } .pdfArea { width: 80%; } /* ------------------- 输入页码 ------------------- */ .pageNum { margin: 10px 0; font-size: 18px; } /*在谷歌下移除input[number]的上下箭头*/ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } /*在firefox下移除input[number]的上下箭头*/ input[type='number'] { -moz-appearance: textfield; } .inputNumber { border-radius: 8px; border: 1px solid #999999; height: 35px; font-size: 18px; width: 60px; text-align: center; } .inputNumber:focus { border: 1px solid #00aeff; background-color: rgba(18, 163, 230, 0.096); outline: none; transition: 0.2s; } /* ------------------- 切换页码 ------------------- */ .turn { background-color: #888888; opacity: 0.7; color: #ffffff; height: 70px; width: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 5px 0; } .turn-btn { background-color: #000000; opacity: 0.6; color: #ffffff; height: 70px; width: 70px; border-radius: 50%; margin: 5px 0; display: flex; align-items: center; justify-content: center; } .turn-btn:hover, .turn:hover { transition: 0.3s; opacity: 0.5; cursor: pointer; } /* ------------------- 进度条 ------------------- */ .progress { position: absolute; right: 50%; top: 50%; text-align: center; } .progress > span { color: #199edb; font-size: 14px; } </style>

# 4. 过程问题汇总 #

### 1）pdf 文件放在前端项目文件夹下，为何 pdf 出不来？ ###

是因为路径问题。将 pdf 放在 `public` > `static` 下，并用 `/static/xxx.pdf` 的路径方式进行引用（ `/` 即已经代表 `public`）即可。具体参考文章：[pdf 文件资源路径问题][pdf]

### 2）pdf 放在服务器上时，访问 pdf 文件跨域 ###

跨域问题一般是在后端这边没有配好 `Access-Control-Allow-Origin` 权限，我这边后端是使用 `nginx` 来进行代理，因此只需在 nginx 中配置好相关的跨域权限即可。具体参考文档：[MDN 跨域相关文档][MDN]

### 3）如何控制权限，让外部的人无法直接通过链接来访问 pdf？ ###

这边有两个思路，第一个是在发起文件请求时，在`头部中带 token`；第二个是使用`防盗链`技术。

1、头部带 token  
  使用 vue-pdf 自带的接口方法 `createLoadingTask`，其中的参数允许用户带自定义头部。参考文章：[vue-pdf.js 在线预览问题][vue-pdf.js]  
  但是经过实践，这个方法有两个地方不符合我的需求。  
  第一，一旦我在 `headers` 中加入 `token`，便又出现访问跨域，不清楚是后端配置问题还是这个方法的问题，还希望有知悉的大佬留下宝贵的意见。  
  第二，`@progress` 事件失效，无法监听资源加载进度，不能给用户及时的加载反馈。权衡之后，我便舍弃了 `createLoadingTask` 的用法，但是其本身功能还是十分强大的，其文档没有写的很清楚，可以进入到[文档的具体源码][Link 1]去查看对应的有哪些参数来进行使用，部分 createLoadingTask 参数如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70_pic_center 3]

使用 createLoadingTask 示例代码如下：

<pdf :src="src"
               @num-pages="pageCount=$event"
               @page-loaded="currentPage=$event"
               @loaded="loadPdfHandler"
               @progress="loadedRatio = $event"
               @link-clicked="currentPage = $event"
               style="border: 1px solid #cccccc;box-shadow:0 0 10px #cccccc;display: inline-block;width:100%"
               @password="password"
               id="pdfID"></pdf>
    
    
    // createLoadingTask 用法
    import pdf from 'vue-pdf'
    
    var headers = { }
    var loadingTask = pdf.createLoadingTask({ 
      url: 'http://192.168.103.70:12100/helpdocument.pdf',
      httpHeaders: headers
    })
    
    export default { 
      components: { 
        pdf
      },
      
    	mounted () { 
      	this.src.promise.then(pdf => { 
          this.numPages = pdf.numPages
        })
      },
      
      data () { 
        return { 
          src: loadingTask,
          numPages: undefined
        }
      }
    }

2、防盗链（最终解决方案）

**什么是防盗链**？  
  浏览器在加载非本站的资源时，会增加一个头域，头域名字固定为：`Referer`。  
  而在 直接粘贴 地址到浏览器地址栏访问时，请求的是本站的该 url 的页面，是 不会有这个 `referer` 这个http头域的。举个例子：

*  将 `http://.../xxx.pdf` 复制进网页地址栏中访问，在调试工具的 `Network` 中的 `headers` 看不到 `Referer`
 *  通过项目中的 `src` 对该资源进行访问，会出现 `Referer`

这个 `referer` 标签正是为了告诉请求响应者（被拉取资源的服务端），本次请求的引用页是谁，资源提供端可以分析这个引用者是否“友好”，是否允许其“引用”，对于不允许访问的引用者，可以不提供图片，这样访问者在页面上就只能看到一个图片无法加载的浏览器默认占位的警告图片，甚至服务端可以返回一个默认的提醒勿盗链的提示图片。  
  总结：防盗链只允许在名单上的人访问，而不在名单上的人禁止访问。

**如何使用防盗链？**  
  一般的站点或者静态资源托管站点来提供防盗链的设置，也就是让服务端识别指定的 `Referer`，在服务端接收到请求时，通过匹配 `referer 头域与配置`，对于 `指定放行`，对于其他 `referer` 视为盗链。  
  因此，在服务端配置相关防盗链配置，并 `放行前端访问的IP` 即可（这里因为是后端同学配的，感兴趣的同学自行上网搜索下如何配置）

### 4）vue-pdf 遇到 pdf 文件加密怎么办？ ###

vue-pdf 组件中有 password 的接口，实现效果如下，当输入密码之后便可以进行 pdf 请求的加载：![在这里插入图片描述][2020111711235858.png_pic_center]  
具体代码如下：

password (updatePassword, reason) { 
          // updatePassword:弹窗提示需要输入密码
          // reason:提示（'NEED_PASSWORD' or 'INCORRECT_PASSWORD'）
          updatePassword(prompt('提示语'))
        }

`缺点`  
  如果密码输入不正确，或者点取消，弹窗都会一直重新弹出并存在，影响软件的正常使用，关闭弹窗的唯一办法就是输入正确的密码，这点问题还是比较大的。

--------------------

文中如果有阐述不当或者有更好的办法，希望各位大佬不吝赐教，十分感谢！

[vue-pdf]: https://github.com/FranckFreiburger/vue-pdf#readme
[vueshowpdf]: https://www.npmjs.com/package/vueshowpdf
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4fd514f2b4e6436fb21c66358bf53887.png
[vue-pdf 1]: /images/20221120/7d57ba794e9249db94e6fe38b0f0da93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020111710583422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/2020111710580849.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70#pic_center
[pdf]: https://www.yht7.com/news/87669
[MDN]: https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS#Access-Control-Allow-Origin
[vue-pdf.js]: https://www.jianshu.com/p/059ce399c671
[Link 1]: https://github.com/mozilla/pdf.js/blob/8ff1fbe7f819513e7d0023df961e3d223b35aefa/src/display/api.js#L117
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201117113605364.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70#pic_center
[2020111711235858.png_pic_center]: https://img-blog.csdnimg.cn/2020111711235858.png#pic_center