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,不显示预览按钮

目录
相关文章
|
1月前
|
前端开发
PDF文件上传转成base64编码并支持预览
PDF文件上传转成base64编码并支持预览
120 12
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
485 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
540 1
|
1月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
73 9
|
1月前
|
移动开发 前端开发 Android开发
开发指南059-App实现微信扫描登录
App是用uniapp开发的,打包为apk,上传到安卓平板中使用
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
216 3
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
192 1
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
322 0
|
1月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
489 0
|
6月前
|
开发者
微信公众平台开发基本配置
微信公众平台开发基本配置
169 0

热门文章

最新文章