Vue PDF预览(微信公众号,app也可用)

简介: Vue PDF预览(微信公众号,app也可用)

下载pdf.js插件

百度网盘下载链接:https://pan.baidu.com/s/1X58rQ4XHzI9jvfnq4319Cw

提取码:jqzx

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

将插件导入项目中

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

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

 

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

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

PDF预览按钮

预览pdf的 openpdf 方法

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

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

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

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

目录
相关文章
|
5天前
|
前端开发
PDF文件上传转成base64编码并支持预览
PDF文件上传转成base64编码并支持预览
43 12
|
5天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
78 7
|
3天前
|
移动开发 JavaScript
Vue——H5微信内支付(二)
Vue——H5微信内支付(二)-9tian
19 3
|
3天前
|
移动开发 JavaScript 前端开发
Vue——H5微信内支付(一)
10月更文挑战第8天
16 1
|
5天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
59 1
|
2天前
|
移动开发 JavaScript
Vue——H5微信内支付(三)+10月更文挑战第10天
Vue——H5微信内支付(三)+10月更文挑战第10天
7 1
|
2天前
|
移动开发 JavaScript
Vue——H5微信内支付(二)
10月更文挑战第9天
7 1
|
5天前
|
移动开发 前端开发 Android开发
开发指南059-App实现微信扫描登录
App是用uniapp开发的,打包为apk,上传到安卓平板中使用
|
5天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
54 3
|
9天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
50 1