
uniapp在线预览pdf功能(手机端Web端皆适配)
·
前言:
uniapp实现在页面当中预览pdf功能,无需跳转。手机端Web皆可完美适配。下文中父页面为需要用户点击预览pdf的页面,子页面为展示pdf的页面
下载及安装
pdfjs-4.0.379-dist 点击即可下载
- 下载完成后在项目static文件夹中创建个pdf文件夹,将压缩包内容解压进去(注意!放置其他位置可能会出现不可预料的错误!!)
使用
子页面(用于展示pdf页面)
- page中创建个vue页面,用于跳转展示pdf,代码如下。(pdfView.vue文件)
<template>
<view>
<web-view :src="allUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
allUrl:'',
viewerUrl:'/static/pdf/web/viewer.html',//刚解压的文件地址,用来渲染PDF的html
}
},
methods: {
},
onLoad(option) {
this.allUrl = this.viewerUrl + '?file=' + option.id//将插件地址与接收的文件地址拼接起来
}
}
</script>
<style>
</style>
父页面(例如有个按钮,点击即可跳转pdf预览页面)
在需要点击预览pdf的vue页面当中使用uni.navigateTo跳转到pdfView.vue页面即可。(记得参数要携带pdf文件的地址!)
- 如若是本地pdf文件,直接传入本地文件地址即可
//点击事件,点击跳转pdfView.vue页面并打开pdf文件
openPdfView(){
let url='/static/pdf/web/测试文档.pdf'//本地放的一个pdf文件
uni.navigateTo({
url:/pages/pdfView/pdfView?id="+url,
})
},
- 如若pdf需要网上获取,则需要先下载为本地临时文件,再将本地文件地址进行传参。
openDeviceText(){
//uniapp官方的下载api
uni.downloadFile({
//需要预览的文件地址
url: 'http://192.168.1.134:8011/upload/测试文件.pdf',
success: (res) => {
if (res.statusCode === 200) {
//下载成功,得到文件临时地址
console.log('下载成功',res.tempFilePath);
//条件编译,若为h5端则直接赋值文件地址
// #ifdef H5
let url = res.tempFilePath
// #endif
//条件编译,若为App端,则需要将本地文件系统URL转换为平台绝对路径 !!
// #ifdef APP-PLUS
let url = plus.io.convertLocalFileSystemURL(res.tempFilePath)
// #endif
//跳转到pdfView并预览pdf文档。
uni.navigateTo({
url:"/pages/pdfView/pdfView?id="+url,
})
}
}
});
},
注意!!不能运行看这
- 网络地址尽量不要直接使用,可能会产生跨域等问题,最好下载为本地临时文件获得路径后使用。
- 重要!!手机端无法预览文件请看上图的条件编译(若为APP端),要使用地址转化才可以。(手机端通过下载方式获取pdf地址必须通过地址转换转换为绝对路径!)
- 本教程只适用于Pdf文件,不可用于浏览图片,word等文件。
更多推荐
所有评论(0)