当前位置:网站首页>Preview PDF with web view in uni app wechat applet

Preview PDF with web view in uni app wechat applet

2021-06-22 00:42:15 Fried chicken with vegetables

1、 Use uni-pp Develop wechat applet , When I went online, I found that Android Unable to load the browser PDF, Here's how to use different methods in different systems .
2、iOS You can preview it online 、Android Download before visiting .

Here is the code

<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 Address prefix 
				src: '',	// PDF Address 
				iOS:true
			}
		},
		onLoad(e) {
			//  From the last page src Parameters , Splice with prefix 
			let src = this.pdf_url + e.src;
			//  Judge the operating system 
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					if (res.system.includes('iOS')) {
						this.iOS = true;
						// iOS  You can directly view 
						this.src = src;
					} else {
						this.iOS = false;
						// Android  It needs to be downloaded and then opened 
						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: ' fail to open file ',
											icon: 'none',
											duration: 2000
										});
									}
								});
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									title: ' Download file failed ',
									icon: 'none',
									duration: 2000
								});
							}
						});
					}
				}
			});
		}
	}
</script>

版权声明
本文为[Fried chicken with vegetables]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/06/20210622003819657g.html