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 class="preview-container"> <iframe :src="viewerUrl" class="web-iframe" frameborder="0"></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>