国家城乡与建设部网站,洛阳青峰网络公司做网站,江苏省宿迁市建设局网站首页,网站的系统帮助概要
本文主要讲述uniapp打包的Android项目如何展示本地的PDF文件#xff0c;并设置标题
需求分析
1、因为是打包的Android项目展示本地的PDF文件#xff0c;首先需要拿到这个本地的PDF文件路径
2、如何在uniapp的vue页面中展示PDF#xff0c;因为没有直接展示PDF文件的…概要
本文主要讲述uniapp打包的Android项目如何展示本地的PDF文件并设置标题
需求分析
1、因为是打包的Android项目展示本地的PDF文件首先需要拿到这个本地的PDF文件路径
2、如何在uniapp的vue页面中展示PDF因为没有直接展示PDF文件的标签/组件考虑使用web-view组件来进行展示PDF文件
3、直接使用web-view组件无法展示PDF使用html先展示PDF然后把html链接放到web-view中进行展示
4、html中如何展示PDF把PDF转为canvas来进行展示这个PDF文件使用开源的js实现下载地址https://download.csdn.net/download/ahualong1/89900189
具体实现
1、pdfviewer.vue代码
templateview classcontentweb-view :srcurl messagehandlePostMessage/web-view/view
/templatescript/* uni页面通信文档* https://ask.dcloud.net.cn/article/35083* 组件使用pdf.js源码修改了部分内容* 只需要完成web-view监听页数并与uni通信即可*/import {computed} from vue;import {uploadStudyTime} from /api/api.jsexport default {data() {return {///hybrid/html/web/viewer.html?fileviewerUrl: /hybrid/html/web/viewer.html, // 注意静态的html文件需要放在根路径下的 hybrid/html 文件夹中fileUrl: , // 要访问的本地pdf的路径url: , // 最终显示在web-view中的路径// currentPage: 1, //初始页totalPage: 0, //总页码currentReadPage: 0, //当前页码SubjectId: ,startTime: 0,titleName: };},onLoad(options) {/* 设置标题 */this.fileUrl options.urlthis.titleName options.title/* 初始页面 */this.pageInt(); //获取pdfs数据},mounted() {// #ifdef H5window.addEventListener(message, this.ReceiveMessage);// #endif},//页面销毁前beforeDestroy() {// this.uploadSduyTimePage()uni.removeStorage({ //清除pdf留下的缓存不干扰新的pdf载入key: pdfjs.history,success() {}})},methods: {//页面初始化pageInt() {this.url ${this.viewerUrl}?file${plus.io.convertLocalFileSystemURL(this.fileUrl)} titleName this.titleName;},/* * 做成监听滚动条判断更好* *///uni 组件通信 监听handlePostMessage(data) {if(data.detail.data.length 1 data.detail.data[0].back){uni.navigateBack()return}let arr data.detail.data.pop()this.totalPage arr[0].totalPage //总页数this.currentReadPage arr[1].page 1 //当前页数},//h5 监听ReceiveMessage(event) {if (event.data event.data.data event.data.data.arg) {this.totalPage event.data.data.arg[0].totalPagethis.currentReadPage event.data.data.arg[1].page 1}},//页面销毁前动作addBrowseRecord() {},}};
/scriptstyle langscss scoped
/style代码中fileUrl 为uni.saveFile()保存到本地的路径直接打开是无法展示的需要使用plus的apiplus.io.convertLocalFileSystemURL(this.fileUrl) 将本地文件系统的URL转换为跨域可以访问的URL
2、viewer.html 文件做了部分修改
!-- 微信 JS-SDK 如果不需要兼容小程序则无需引用此 JS 文件。 --
!-- script typetext/javascript src//res.wx.qq.com/open/js/jweixin-1.6.0.js/script --
!-- uni 的 SDK必须引用。 --
script typetext/javascript src./uni.webview.js/script
script typetext/javascriptdocument.getElementById(backClickId).addEventListener(click,function(){uni.postMessage({data: {back: true}});});var interval setInterval(loadPdf(), 300);function loadPdf() {if (PDFViewerApplication.pdfDocument null) {// console.info(Loading...);} else {clearInterval(interval);// let _iframe document.getElementById(iframe)console.info(Load Success...:,PDFViewerApplication.pdfDocument);}if(location.href.includes(titleName)){document.getElementById(titleNameId).textContent getParameterByName(titleName,);}else{document.getElementById(titleNameId).textContent 资料学习;}};function getParameterByName(name, url) {if (!url) url location.href;name name.replace(/[\[\]]/g, \\$);var regex new RegExp([?] name (([^#]*)||#|$)),results regex.exec(url);if (!results) return null;if (!results[2]) return ;return decodeURIComponent(results[2].replace(/\/g, ));}
/script
其中uni.postMessage 是web-view向uniapp.vue传递消息
uni.postMessage({data: {back: true}});
方法getParameterByName 是获取打开的链接获取参数的方法
运行项目到模拟器或真机进行展示PDF就OK了。
可以查看项目中 pages- pdfvierer-pdfvierer.vue页面
项目下载地址https://download.csdn.net/download/ahualong1/89900184
