1. 需求

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

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

2. PDF 组件选型

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

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

2.1 各方案对比

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

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

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

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

1）iframe / object / embed

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

<iframestyle="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>

2）vueshowpdf

效果

安装

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 是直接在页面上展示

安装

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 进度条组件来展示加载进度

效果

<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 () {// 在页面销毁时记得清空 setIntervalclearInterval(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. 大于maxthis.currentPage = this.pageCount} else if (this.currentPage < 1) {// 2. 小于minthis.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 = 1this.toTop()} else if (val === 'last' && this.currentPage < this.pageCount) {this.currentPage = this.pageCountthis.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 文件资源路径问题

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

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

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

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

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

使用 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 请求的加载：
具体代码如下：

<pdf @password="password" ...></pdf>

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

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

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

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

Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
[译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了
园子里关于ASP.NET Core Web API的教程很多,但大多都是使用EF+Mysql或者EF+MSSQL的文章.甚至关于ASP.NET Core Web API中使用Dapper+Mysql组 ...
python中tkinter模块窗口操作_Python GUI之tkinter窗口视窗教程大集合（看这篇就够了）...
本篇博文搬到个人博客:[洪卫の博客](https://sunhwee.com)上面去了,想要获得最佳阅读体验,欢迎前往 [https://sunhwee.com](洪卫の博客), 建议用电脑查看教程文 ...
React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
.NET Core实战项目之CMS 第五章入门篇-Dapper的快速入门看这篇就够了
写在前面上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...
Spring Cloud入门，看这篇就够了！
点击▲关注 "中生代技术" 给公众号标星置顶更多精彩第一时间直达概述首先我给大家看一张图,如果大家对这张图有些地方不太理解的话,我希望你们看完我这篇文章会恍然大悟. 什 ...
.NET Core实战项目之CMS 第二章入门篇-快速入门ASP.NET Core看这篇就够了
本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新手朋友),但是转念一想不如来点猛的(考虑到急性子的朋友),让你通过本文的学习就能快速的入门ASP.NET Core.既 ...
一文详解JavaBean 看这篇就够了
一文详解JavaBean 看这篇就够了 JavaBean的历史渊源 JavaBean的定义(通俗版) JavaBean应用 < jsp:useBean > < jsp:getProp ...
uiautomation遍历windows所有窗口_万字长文！滑动窗口看这篇就够了！
大家好,我是小浩.今天是小浩算法 "365刷题计划" 滑动窗口系列 - 整合篇.之前给大家讲解过一些滑动窗口的题目,但未作系统整理. 所以我就出了这个整合合集,整合工作中除了保留原 ...

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