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

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);

最近更新

  1. TCP协议是安全的吗?

    2024-01-27 15:02:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-27 15:02:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-27 15:02:02       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-27 15:02:02       20 阅读

热门阅读

  1. c#扩展方法

    2024-01-27 15:02:02       36 阅读
  2. Spring Boot + EasyExcel实现Excel文件导入导出

    2024-01-27 15:02:02       39 阅读
  3. ReactHooks 官网文档翻译

    2024-01-27 15:02:02       25 阅读
  4. react-jss书写样式

    2024-01-27 15:02:02       37 阅读
  5. docker基础

    2024-01-27 15:02:02       35 阅读
  6. GBASE南大通用分享:clickhouse-Merge Tree原理解析

    2024-01-27 15:02:02       35 阅读