当前位置：首页 > news >正文

uniapp: 实现pdf预览功能

news 2025/8/14 9:34:07

第一章实现效果

第二章了解并解决需求

2.1 了解需求

2.2 解决需求

2.2.1 方法一

2.2.2 方法二

第三章资源下载

第一章实现效果

第二章了解并解决需求

2.1 了解需求

前端需要利用后端传的pdf临时路径实现H5端以及app端的pdf预览
首先我们别像pc端一样，利用iframe或者 window.open，解决方法如下：

2.2 解决需求

2.2.1 方法一

static下添加该pdf文件，一定要注意的是将该文件夹放在static下，文件获取在最后给出

创建pdf预览文件夹：

根据需求撰写前端代码：

<template><view class="wrapper"><uni-nav-barleft-icon="back" :fixed="true"@clickLeft="back2Index" title="pdf预览"backgroundColor="#1677FF"height="88rpx"color="#fff":border="false"safeAreaInsetTop></uni-nav-bar><web-view :src="pdfUrl" width="100%" height="100rpx" class="main"></web-view></view>
</template><script>export default {data() {return {pdfUrl:'',// 方法一的预览路径，注意写法，文件命名可以自定义，具体看自己，但是参数格式不要错了viewerUrl: '/static/html/web/viewer.html?file='};},onLoad(options) {// pdf预览路径拼接，options是请求后端路径的页面值传参的this.pdfUrl = this.viewerUrl + options.pdfUrlconsole.log('url', this.pdfUrl)},methods:{back2Index(){uni.navigateBack()},}}
</script><style lang="scss" scoped>
.wrapper{background-color: #f3f4f6;.main{margin-top: 88rpx;}
}
</style>

请求路径的文件代码内容：

// 获取pdf文件信息
downloadInfo (file) {// 接口请求，大家自行调整自己的请求方式deathInfoService.download({fileName: file}).then(({data}) => {let blob = dataconst binaryData = []binaryData.push(blob)// 看下面，该url是小编最终转的pdf临时路径const url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf;chartset=UTF-8' }))// 拿到url之后传参，跳转页面uni.navigateTo({url:'/page_cremationAppoint/cremationAppoint/pdfView?pdfUrl='+ url})})
},

注意：以上所有代码只是小编的大致思路，具体实现需要大家根据实际情况自行判断，例如pdf路径是已经有的，就不需要发送请求，直接带参跳转即可；也可能有的后端会直接返回一个路径…只是小编的这个后端比较懒，说能实现就行，所以小编这里为了得到路径对后端返回的值做了处理。