微信小程序預覽pdf需要注意的是，在安卓端和ios端是有差異的。

安卓端不能用web-view直接打開，需要先下載到本地，再打開文件進行預覽。

網上說的ios端可以直接用web-view進行預覽，但是我使用ios預覽pdf時，報400錯誤。

尚未解決，記錄一下。

<template><view><web-view :webview-styles="webviewStyles" :src="fileUrl"></web-view></view> </template><script>import globalConfig from '@/config/config.js'export default {data() {return {fileUrl: null,};}, onLoad(option) {console.log(option);this.fileUrl = globalConfig.imageRootUrl+option.file;console.log(this.fileUrl);} } </script> //這里的 url 就是pdf文件的路徑，直接調用此方法就可以打開pdf文件openReport(url) {uni.showLoading({title: '加載中',mask: true})wx.downloadFile({url: url,success: function(res) {console.log(res)uni.hideLoading()var filePath = res.tempFilePath;uni.showLoading({title: '正在打開',mask: true})wx.openDocument({filePath: filePath,fileType: 'pdf',success: function(res) {console.log(res)uni.hideLoading()console.log('打開文檔成功');},fail: function(err) {uni.hideLoading()console.log('fail:' + JSON.stringify(err));}});},fail: function(err) {uni.hideLoading()console.log('fail:' + JSON.stringify(err));}});},navigateTo(url) {uni.navigateTo({url});},showPdf(){let self = this;switch (uni.getSystemInfoSync().platform) {case 'android':console.log('安卓')// 這里直接調用原生的方法，我們上面定義的self.openReport(globalConfig.imageRootUrl+self.evaluationSuitability.filePath)break;case 'ios':console.log('IOS')//這里跳轉web-view頁面self.navigateTo('/pages/evaluationSuitability/pdf?file='+self.evaluationSuitability.filePath)break;default:console.log('微信開發者工具')self.navigateTo('/pages/evaluationSuitability/pdf?file='+self.evaluationSuitability.filePath)break;}}

總結

以上是生活随笔為你收集整理的记录一次微信小程序实现预览pdf的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。