uni-app 微信小程序使用 web-view 预览PDF

「爱情、让人受尽委屈。」 2022-10-08 11:18 11阅读 0赞

> 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>