微信小程序预览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;
}
}