【uniapp/vue/pdf.js】在 uniapp 中使用 pdf.js（可以实现在电脑和手机上预览 pdf 文件）

花间半盘棋2024-01-27 12:32

pdf.js 可以在 uniapp 中使用，可以实现在电脑和手机上预览 pdf 文件，

如果是用 iframe 无法实现在手机上预览，附件传的是比较低版本的 pdf.js 文件（2.2.228），其中跨域报错已处理，因为我试过高版本的（如 4.x）可能会引起手机的兼容性问题，导致在有些型号的手机无法正常显示，低版本的可以正常显示，只是样式有些不同。

html 复制代码

<web-view :src="url"></web-view>

需要在 data 中声明的变量，路径基本上是固定的，建议把文件放在 static 目录下：

javascript 复制代码

url: '', // PDF路径
viewerUrl: '/static/pdf/web/viewer.html', // 用来渲染PDF的html

这里的 pdfLink 是在线链接的地址，根据实际情况进行替换

javascript 复制代码

this.url = this.viewerUrl + '?file=' + encodeURIComponent(this.pdfLink);