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

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

2024-08-15 22:08:59 前端知识 前端哥 296 107 我要收藏

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

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

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

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

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

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

this.url = this.viewerUrl + '?file=' + encodeURIComponent(this.pdfLink);
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15683.html
标签
评论
发布的文章

JQuery 详细教程

2024-08-21 22:08:08

jQuery2 高级教程(八)

2024-08-21 22:08:06

jQuery Spellchecker 使用教程

2024-08-21 22:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!