建设银行个人网上银行网站加载,企业注册平台,电脑版网页版登录入口,软件开发生命周期前言
工作上接到的一个任务#xff0c;实现pdf的在线预览#xff0c;其实uniapp中已经有对应的api#xff1a;uni.openDocument(OBJECT)#xff08;新开页面打开文档#xff0c;支持格式#xff1a;doc, xls, ppt, pdf, docx, xlsx, pptx。#xff09;**实现了相关功能…前言
工作上接到的一个任务实现pdf的在线预览其实uniapp中已经有对应的apiuni.openDocument(OBJECT)新开页面打开文档支持格式doc, xls, ppt, pdf, docx, xlsx, pptx。**实现了相关功能但是会跳转到第三方应用打开其实还是先下载再预览所以上级特别强调的是在app内线上预览
环境
开发技术uniappuni-ui兼容环境androidios和h5
相关知识
web-viewweb 浏览器组件可以用来承载网页的容器会自动铺满整个页面如果不想铺满页面需要设置样式比如web-view :style{height:windowHeight} stylewidth: 100%; :srcallUrl/web-viewuni.getSystemInfo(callback)异步获取系统信息调用成功的话会返回系统环境、手机型号、app名称、版本、屏幕宽高等等encodeURIComponent()信息加密对应解密方法decodeURIComponent()
具体实现
下载pdf.js官网地址将pdf.js文件包中的web和build复制到项目文件/hybrid/html/下新建一个vue文件如file-preview.vue并且在page.json中注册
{path: pages/file-preview/file-preview,style: {navigationBarTextStyle: black}
},在file-preview.vue中添加如下代码
templateviewweb-view :style{height:windowHeight} stylewidth: 100%; :srcallUrl/web-view/view
/templatescript// import globalConfig from /configexport default {data() {return {// pdf.js中的build和web文件存储在该项目的/hybrid/html/路径下viewerUrl: /hybrid/html/web/viewer.html,allUrl:,windowHeight: 200px}},onLoad(option) {uni.getSystemInfo({success: (res) {this.windowHeight (res.windowHeight-10)px;} })let urlencodeURIComponent(option.url)this.allUrlthis.viewerUrl?fileurl;}}
/script
其中 option为其他页面传过来的参数 option.url为文档流路径例如url‘http://58.49.74.231:85/UploadFile/Get?fileName汇报准备工作_S_20191101170956271.pdf’
如果文件流的域名和pdf.js的域名不相同会报错需要在web/viewer.js中吧跨域报错的信息注释掉 参考链接
如何实现高性能的在线 PDF 预览
