前言
vue2中预览pdf的方法有pdf.js和vue-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);
- 缓存问题：利用iframe打开pdf后，当再次利用iframe打开另一个pdf时会显示第一份pdf，原因是浏览器对url的缓存处理。
使用pdf.js+iframe预览
相比起直接使用iframe预览，功能更加强大，支持更多自定义的功能。
比如：
- 自定义样式：使用 PDF.js，你可以更灵活地自定义 PDF 文件的样式。你可以修改文字的颜色、字体大小、行间距等，以满足特定的需求。
- 高级功能：PDF.js 提供了许多高级功能，例如缩放、旋转、搜索、导航目录等。这些功能在直接使用 iframe 时不可用。
- 高级操作：使用 PDF.js，你可以实现更高级的操作，如添加注释、书签、水印等。这些操作在直接使用 iframe 时无法实现。
- 兼容性：PDF.js 可以在大多数现代浏览器中正常工作，因此可以提供更好的兼容性，以确保用户可以在各种设备和浏览器上正确显示和操作 PDF 文件。
- 定制性：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}