uni-app 微信小程序使用 web-view 预览PDF
Posted 地表最强菜鸡
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 微信小程序使用 web-view 预览PDF相关的知识,希望对你有一定的参考价值。
1、使用uni-pp开发微信小程序,上线之后发现android无法加载览PDF,这里我们判断一下在不同系统使用不同的方式。
2、ios可以直接在线预览、Android先下载再访问。
下面直接贴代码
<template>
<view class="page">
<web-view :src="src" v-if="iOS"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
pdf_url: pdf_url, // PDF地址前缀
src: '', // PDF地址
iOS:true
}
},
onLoad(e) {
// 上一个页面传过来的src参数,与前缀拼接
let src = this.pdf_url + e.src;
// 判断操作系统
uni.getSystemInfo({
success: (res) => {
console.log(res)
if (res.system.includes('iOS')) {
this.iOS = true;
// iOS 可直接查看
this.src = src;
} else {
this.iOS = false;
// Android 需要下载后再打开
uni.downloadFile({
url: src,
success: (res) => {
const path = res.tempFilePath;
uni.openDocument({
filePath: path,
fileType: 'pdf',
success: (res) => {
uni.navigateBack({
delta: 1
});
},
fail: (err) => {
uni.showToast({
title: '打开文件失败',
icon: 'none',
duration: 2000
});
}
});
},
fail: (err) => {
console.log(err);
uni.showToast({
title: '下载文件失败',
icon: 'none',
duration: 2000
});
}
});
}
}
});
}
}
</script>
以上是关于uni-app 微信小程序使用 web-view 预览PDF的主要内容,如果未能解决你的问题,请参考以下文章