【vue/uniapp】pdf.js 在一些型号的手机上不显示

文章讲述了在uniapp项目中使用pdf.js在线浏览PDF时,遇到在部分Android设备(如华为和OPPO)不显示的问题。通过将pdf.js的最新4.x版本降级到2.2.228解决了问题,同时提到了跨域问题的处理和不同版本注释的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

引入:
uniapp 项目通过 pdf.js 来在线浏览 pdf 链接,在微信小程序中都显示正常,但是通过 app 跳转小程序,在苹果、小米显示正常,但是华为和 oppo 就不显示,可以通过降 pdf.js 的版本来解决这个问题。
解决:
我是将官网下载的最新版本 4.x 降到了 2.2.228,特别需要注意的是,解决跨域问题报错,两个版本注释的地方不太一样,需要在 web/viewer.js 文件中进行注释,如图:
请添加图片描述
请添加图片描述
相关资源:
历史版本我觉得不太好找,所以附一下相关链接,也方便自己以后用的时候回来找。

  • 官网(最新版下载):https://mozilla.github.io/pdf.js/getting_started/#download
  • cdn 使用:https://cdnjs.com/libraries/pdf.js/2.2.228
  • 历史版本下载:https://github.com/mozilla/pdf.js/releases
### 集成 `pdf.js` 到 Vue3 UniApp 项目 #### 安装依赖库 为了在Vue3 UniApp环境中使用`pdf.js`,首先需要安装必要的npm包。可以通过命令行工具执行如下操作: ```bash npm install pdfjs-dist --save ``` 这会将官方维护的`pdf.js`发行版加入到项目之中。 #### 准备静态资源文件 依据描述,在实际部署时应把`pdf.js`及相关字体等辅助文件放置于项目的`static`目录下[^1]。这样做的好处是可以减少打包体积,并且加快页面加载速度。 #### 创建自定义组件用于显示PDF文档 下面是一个简单的例子,展示了怎样创建一个新的Vue组件来渲染PDF内容: ```html <template> <div class="pdf-viewer"> <!-- 显示区域 --> <canvas ref="theCanvas"></canvas> </div> </template> <script setup lang="ts"> import { onMounted, ref } from 'vue'; // 导入核心API以及worker脚本路径设置 import * as pdfjsLib from 'pdfjs-dist'; (pdfjsLib as any).GlobalWorkerOptions.workerSrc = '/static/pdf.worker.min.js'; const props = defineProps({ src: String, }); let loadingTask; onMounted(async () => { try { const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); // 加载指定URL处的PDF文档 loadingTask = pdfjsLib.getDocument(props.src); const pdf = await loadingTask.promise; // 假设只绘制第一页作为示例;真实场景可能涉及分页逻辑 const page = await pdf.getPage(1); const viewport = page.getViewport({ scale: 1 }); canvas.height = viewport.height; canvas.width = viewport.width; // 使用render方法呈现页面图像至画布上 const renderContext = { canvasContext: ctx, viewport: viewport }; await page.render(renderContext).promise; } catch (error) { console.error(error.message || error); } }); </script> <style scoped> .pdf-viewer { width: 100%; } canvas { border: solid 1px black; } </style> ``` 上述代码片段实现了基本的功能需求,即在一个空白画板(`canvas`)之上按照一定比例缩放并展示来自网络位置的一份或多份PDF资料的内容概貌图样。注意这里仅简单处理了首张图片的情况,对于更复杂的应用场景还需要进一步完善翻页机制和其他交互特性。 #### 组件调用方式 当完成了以上准备工作之后就可以像平常一样引入新组建并在模板里边按需实例化它啦! ```html <!-- ParentComponent.vue --> <template> ... <PdfViewer :src="'/path/to/sample.pdf'" /> ... </template> <script setup lang="ts"> ... import PdfViewer from './components/PdfViewer.vue' ... </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花间半盘棋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值