uniapp+vue3实现微信公众号H5预览多页PDF及下载

发布时间:2026/7/11 5:32:49
uniapp+vue3实现微信公众号H5预览多页PDF及下载 1. 建议下载旧版 PDF.js新版本兼容性问题偏多我下载的是 v2.16.105 版本下载地址Release v2.16.105 · mozilla/pdf.js · GitHub下载后解压得到 build 和 web 文件夹首先在项目中的 static 目录新增文件夹名字随意可以是 pdf本文章用的名称是pdfpure将解压后的 build 和 web 文件夹放进pdfpure。2. 封装预览页面组件template view classpreview-container iframe :srcviewerUrl classweb-iframe frameborder0/iframe /view /template script setup import { ref, computed } from vue import { onLoad } from dcloudio/uni-app const fileUrl ref() // 计算文件后缀 const fileType computed(() { if (!fileUrl.value) return return fileUrl.value.split(.).pop().toLowerCase() }) // 核心动态计算出当前文件的最终全屏预览地址 const viewerUrl computed(() { if (!fileUrl.value) return if (fileType.value pdf) { // 1. 确保对 PDF 的原链接进行完整的编码防止特殊字符如 ?, , 截断链接 const safeUrl encodeURIComponent(fileUrl.value) // 2. 拼接到刚才你测试成功的路径后面本地 pdf 文件夹地址 return /h5/static/pdfpure/web/viewer.html?file${safeUrl} } else { // Office 文档继续走微软 return https://view.officeapps.live.com/op/embed.aspx?src${encodeURIComponent(fileUrl.value)} } }) onLoad((options) { if (options.previewUrl) { // 从上个页面传回来的 pdf 地址由于地址偏长需要先编码后传输 fileUrl.value decodeURIComponent(options.previewUrl) } }) /script style scoped .preview-container { width: 100%; height: 100vh; overflow: hidden; } .web-iframe { width: 100%; height: 100%; border: none; display: block; } /style