uniapp展示本地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代码

<template>
<view class="content">
<web-view :src="url" @message="handlePostMessage"></web-view>
</view>
</template>

<script>
/* uni页面通信文档
 * https://ask.dcloud.net.cn/article/35083
 * 组件使用pdf.js源码修改了部分内容
 * 只需要完成web-view监听页数并与uni通信即可
 */
import {
computed
} from "vue";
import {uploadStudyTime} from '@/api/api.js'
export default {
data() {
return {
///hybrid/html/web/viewer.html?file=
viewerUrl: '/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.url
this.titleName = options.title
/* 初始页面 */
this.pageInt(); //获取pdfs数据
},

mounted() {
// #ifdef H5
window.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].totalPage
this.currentReadPage = event.data.data.arg[1].page + 1
}
},

//页面销毁前动作
addBrowseRecord() {

},

}
};
</script>

<style lang="scss" scoped>
</style>

代码中fileUrl 为uni.saveFile()保存到本地的路径，直接打开是无法展示的，需要使用plus的api：plus.io.convertLocalFileSystemURL(this.fileUrl) 将本地文件系统的URL转换为跨域可以访问的URL

2、viewer.html 文件做了部分修改

<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
<!-- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
<!-- uni 的 SDK，必须引用。 -->
<script type="text/javascript" src="./uni.webview.js">

</script>
<script type="text/javascript">
document.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

原文地址：https://blog.csdn.net/ahualong1/article/details/143057514

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！