【Vue】vue中使用pdf，看这篇就够了~ |
您所在的位置：网站首页 › vue如何打开页面 › 【Vue】vue中使用pdf，看这篇就够了~ |
【Vue】vue中使用pdf，看这篇就够了~
|
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 文件是一样的，相当于一个新的页面内嵌在当前页面中。 2）vueshowpdf 效果 安装 npm install vueshowpdf -S使用 打开pdf 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 } } } .container { font-family: PingFang SC; width: 100%; }3）vue-pdf 效果 与 vueshowpdf 不同在于，vueshowpdf 是弹窗展示，而 vue-pdf 是直接在页面上展示 使用 import pdf from 'vue-pdf' export default { components: { pdf } } .container { font-family: PingFang SC; width: 100%; height: 500px; } 3. vue-pdf 完整代码对于代码的用途均在下列代码中，优化了交互过程内容有： 切换页面时，页面（滚动条）自动回到顶部在页码小于等于1或等于最大页数时，上一页和下一页按钮分别禁用页码输入框限制了输入范围使用了 ElementUI 的 Progress 进度条组件来展示加载进度效果
是因为路径问题。将 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 示例代码如下： // 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 请求的加载： 缺点 如果密码输入不正确，或者点取消，弹窗都会一直重新弹出并存在，影响软件的正常使用，关闭弹窗的唯一办法就是输入正确的密码，这点问题还是比较大的。 文中如果有阐述不当或者有更好的办法，希望各位大佬不吝赐教，十分感谢！ |
安装
具体代码如下：【本文地址】