目錄

第一章 實(shí)現(xiàn)效果

第二章 了解并解決需求?

2.1 了解需求

2.2 解決需求

2.2.1 方法一

2.2.2 方法二

第三章 資源下載

---

第一章 實(shí)現(xiàn)效果

第二章 了解并解決需求?

2.1 了解需求

• 前端需要利用后端傳的pdf臨時路徑實(shí)現(xiàn)H5端以及app端的pdf預(yù)覽
• 首先我們別像pc端一樣，利用iframe或者?window.open，解決方法如下：

2.2 解決需求

2.2.1 方法一

• static下添加該pdf文件，一定要注意的是將該文件夾放在static下，文件獲取在最后給出?

• ?創(chuàng)建pdf預(yù)覽文件夾：

• 根據(jù)需求撰寫前端代碼：

<template><view class="wrapper"><uni-nav-barleft-icon="back" :fixed="true"@clickLeft="back2Index" title="pdf預(yù)覽"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:'',// 方法一的預(yù)覽路徑，注意寫法，文件命名可以自定義，具體看自己，但是參數(shù)格式不要錯了viewerUrl: '/static/html/web/viewer.html?file='};},onLoad(options) {// pdf預(yù)覽路徑拼接，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>

• 請求路徑的文件代碼內(nèi)容：

// 獲取pdf文件信息
downloadInfo (file) {// 接口請求，大家自行調(diào)整自己的請求方式deathInfoService.download({fileName: file}).then(({data}) => {let blob = dataconst binaryData = []binaryData.push(blob)// 看下面，該url是小編最終轉(zhuǎn)的pdf臨時路徑const url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf;chartset=UTF-8' }))// 拿到url之后傳參，跳轉(zhuǎn)頁面uni.navigateTo({url:'/page_cremationAppoint/cremationAppoint/pdfView?pdfUrl='+ url})})
},

注意： 以上所有代碼只是小編的大致思路，具體實(shí)現(xiàn)需要大家根據(jù)實(shí)際情況自行判斷，例如pdf路徑是已經(jīng)有的，就不需要發(fā)送請求，直接帶參跳轉(zhuǎn)即可；也可能有的后端會直接返回一個路徑…只是小編的這個后端比較懶，說能實(shí)現(xiàn)就行，所以小編這里為了得到路徑對后端返回的值做了處理。

• 第一種方法已經(jīng)實(shí)現(xiàn)了，具體效果在最開始展示了

2.2.2 方法二

• 方法2的處理方式與方法一的處理思路是一樣的嗎，唯一不同的就是使用的工具不同，這里使用的是pdf.js文件。
• 需要更改的地方是：

• 該url是根據(jù)大家工具放的位置寫的，但也是在static文件下，參數(shù)是url=，代碼如下：

viewerUrl: '/static/pdf/pdf.html?url='

第三章 資源下載

小編gitee倉庫中：resource_package: uniapp pdf預(yù)覽需要的資源包