【vue2中的pdf预览】iframe/pdf.js/vue-pdf

前言

vue2中预览pdf的方法有pdf.js和vue-pdf等。下面进行简单对比&使用方法的介绍。

正文

直接使用iframe预览pdf

使用iframe预览pdf

如果后端返回的不是url，那么需要使用responseType = 'blob'来读取后端传来的内容。

扩展：

• 同样是使用iframe进行预览，如果有其他格式 如word/xls/ppt/txt的文件需要预览，可以使用微软解析地址的url进行预览。
  注意：文件地址是公网可打开的；控制的只是src地址
  微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址
  参考：vue预览 pdf、word、xls、ppt、txt文件方法
• 常见问题的解决
  参考：PDF预览完整解决方案及各种兼容（VUE版）
  • 缓存问题：利用iframe打开pdf后，当再次利用iframe打开另一个pdf时会显示第一份pdf，原因是浏览器对url的缓存处理。
    解决办法：给url加时间戳或随机数，这样就没有缓存问题了。
    const fresh=new Date().getTime();//时间戳 this.url = this.url+'?'+ fresh; // 初始化查看pdf应用地址
  • 使用base64url问题：有些pdf的url采用base64格式，直接将base64格式url放进src中可能会报错导致显示不了。原因是base64地址太长，浏览器不支持。
    **解决办法：**利用Blob转base64url成文件路径.
    css复制代码 var bstr = window.atob(_this.baseUrl); //解码 var n = bstr.length; var u8arr = new Uint8Array(n);

使用pdf.js+iframe预览

相比起直接使用iframe预览，功能更加强大，支持更多自定义的功能。

比如：

1. 自定义样式：使用 PDF.js，你可以更灵活地自定义 PDF 文件的样式。你可以修改文字的颜色、字体大小、行间距等，以满足特定的需求。
2. 高级功能：PDF.js 提供了许多高级功能，例如缩放、旋转、搜索、导航目录等。这些功能在直接使用 iframe 时不可用。
3. 高级操作：使用 PDF.js，你可以实现更高级的操作，如添加注释、书签、水印等。这些操作在直接使用 iframe 时无法实现。
4. 兼容性：PDF.js 可以在大多数现代浏览器中正常工作，因此可以提供更好的兼容性，以确保用户可以在各种设备和浏览器上正确显示和操作 PDF 文件。
5. 定制性：PDF.js 是一个开源项目，可以根据项目需求进行二次开发和定制。你可以根据具体需求修改源代码，以满足特定的业务需求。
   详细|vue中使用PDF.js预览文件实践包括如何注释代码以解决跨域问题。

PDF.js使用总结包括一些api列举。

扩展

vue项目，npm install方式使用pdfjs 这里不是使用iframe的，而是直接渲染内容，手动写翻页的按钮或其他功能。有完整代码。
pdfjs-dist web预览pdf文件, pdfjs-dist example 也是使用npm方式使用pdf.js的。包括对比vue-pdf的优劣，和vue.config.js的配置，有完整代码。

npm install方式使用pdf.js： 需根据需求自己写样式，实现相关功能。

以静态资源方式使用（就是本文章前面的用法）： 将pdf下载到本地项目中，以静态资源方式使用，通过 pdf.js 提供的 viewer.html

文件来展示服务器上的pdf文件，无须自己设置样式（已有pdf.js的全套样式和相关功能，不需要的地方可通过更改源码等方式自行去掉）

vue-pdf

vue-pdf是基于pdfjs-dist插件的vue封装。
PDF预览完整解决方案及各种兼容（VUE版）可以参考的简略版的使用方法和常见问题解决。

vue-pdf 一个基于vue的pdf预览插件(vue2.x)这个封装了一个有分页显示功能的完整代码，可以参考，整体使用的逻辑比较清晰。

扩展

vue实战--vue+elementUI实现多文件上传+预览（word/PDF/图片/docx/doc/xlxs/txt） ；可以参考的封装思路和功能，有完整代码和图示。预览还是用的https://view.officeapps.live.com/op/view.aspx?src=${data}