下載后把壓縮包解壓到自己的項(xiàng)目的static文件夾下的pdf文件下，如圖
新建一個(gè)文件名為filePreview.vue
<template>
<view>
<web-view :src="allUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
viewerUrl:'../../static/pdf/web/viewer.html',
allUrl: '.'
}
},
onLoad(options) {
this.allUrl = `${this.viewerUrl}?file=${options.url}`;
// this.allUrl = this.viewerUrl + '?file=' + options.url
}
}
</script>
在下載文件事件
<view @click=”getContractPdf“>下載文件</view>
getContractPdf() {
exportContractPdf({
id: this.id
}).then(res => {
this.url = res.data
uni.navigateTo({
url: '/pages/index/filePreview?url=' + this.url
})
})
},
1.如果預(yù)覽文件是亂碼情況或者在pc上報(bào)ocale.properties的請(qǐng)求返回404
解決：就是pdfjs下載版本有問(wèn)題，下載以前的老版本文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-704590.html
2.如果出現(xiàn)跨域問(wèn)題直接修改源代碼在viewer.js中，也可以全局搜素file origin does not match viewer,注釋該代碼塊
解決如下：
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-704590.html
到了這里，關(guān)于uniapp使用H5實(shí)現(xiàn)預(yù)覽pdf文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
