Vue PDF预览（微信公众号，app也可用）-CFANZ编程社区

Vue PDF预览（微信公众号，app也可用）

下载pdf.js插件

将插件导入项目中

PDF预览按钮

预览pdf的 openpdf 方法

判断是否为pdf文件的 isPDF方法

下载pdf.js插件

百度网盘下载链接：https://pan.baidu.com/s/1X58rQ4XHzI9jvfnq4319Cw 提取码：jqzx

下载后得到pdfjs压缩包，解压后，得到pdfjs文件夹

将pdfjs文件夹放入public文件夹中

Vue PDF预览（微信公众号，app也可用）_相对路径

此时，pdfjs对于index.html的相对路径为 ‘./js/pdfjs’

若项目的静态文件都在static中，则将pdfjs文件夹放入static文件夹中

Vue PDF预览（微信公众号，app也可用）_html_02

此时，pdfjs对于index.html的相对路径为 ‘./static/pdfjs’

Vue PDF预览（微信公众号，app也可用）_vue_03

Vue PDF预览（微信公众号，app也可用）_vue_04

pdfURL为后端提供的获取pdf文件的接口，传入fileID，返回pdf文件流

newURL中，‘./js/pdfjs’为pdfjs对于index.html的相对路径（若与此范例不同，记得修改成实际的相对路径）

Vue PDF预览（微信公众号，app也可用）_js插件_05

Vue PDF预览（微信公众号，app也可用）_相对路径_06

原理：将文件名传入isPDF方法，若文件名包含pdfExts数组中的.pdf或.PDF后缀，则返回true，即该文件是pdf文件，可以预览，否则返回false，不显示预览按钮

0 条评论