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

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

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

兼容性问题可以看另一篇文章:【vue/uniapp】pdf.js 在一些型号的手机上不显示

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);
相关推荐
整点可乐3 分钟前
cesium实现鹰眼图
javascript·cesium
艾小码4 分钟前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
BUG创建者16 分钟前
openlayer根据不同的状态显示不同的图层颜色
android·java·javascript
南方kenny30 分钟前
Mock.js:前端开发的假数据神器
前端·javascript
1024小神40 分钟前
Cocos游戏开发中,如何动态加载资源和远程资源 resources
前端·javascript
2501_915909061 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero1 小时前
UniappDay04
vue.js·微信小程序·uni-app
猫和老许1 小时前
Vue 3 拖拽排序功能优化实现:从原理到实战应用
前端·javascript·vue.js
sq8001 小时前
ag-grid-vue3 降级,支持低版本浏览器
前端·javascript·vue.js
兔年鸿运Q小Q1 小时前
html转word下载
javascript·vue.js·word