uniapp 在线预览文件 (使用web-view) 解决打包安卓APP后pdf下载才可查看问题

使用uniapp 封装app，其中有在线预览功能：

在线预览vue文件：

<template>
	<view class="content">
		<!--异形屏时设置view占用通知栏-->
		<!-- <view class="title-padding"></view>
		<view class="report-header"></view> -->
		<view class="report-area">
			<u-tabs-swiper class="nav-tab" ref="tabs" :list="navList" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs-swiper>
			<web-view class="web-frame"  :webview-styles="webviewStyles" :src="navUrl"></web-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list:[],
			navList: [],
			viewerUrl: '/hybrid/html/web/viewer.html',
			current:0,
			navUrl:'',
			webviewStyles: {
				progress: {
					color: '#FF3333'
				}
			}
		};
	},
	onLoad(option) {
		this.list = JSON.parse(option.list);
		this.init();
	},
	onShow() {},
	methods: {
		init(){
			let list = this.list;
			let navList = [];
			for(let i in list){
				let name = list[i].name;
				if(name.indexOf('.')!=-1) {
					name = name.substring(0, name.lastIndexOf('.'));
				}
				navList.push({name: name, url:list[i].url})
			}
			this.navList = navList;
			this.setUrl(navList[0].url);
			// 当打包成APP时解决webView头部显示问题
			// #ifdef APP-PLUS
			var currentWebview = this.$mp.page.$getAppWebview(); //获取当前页面的webview对象
			setTimeout(function() {
				let wv = currentWebview.children()[0]
				wv.setStyle({top:120,height:'100%',width:'100%'})
			}, 1000); //如果是页面初始化调用时，需要延时一下
			// #endif
			
		},
		/** 
		 * 多个文件时头部多个文件tab切换
		 * @param {Object} index 文件index
		 */
		tabsChange(index){
			this.current = index;
			let list = this.navList;
			for(let i in list){
				if(i == index) {
					this.navUrl = this.setUrl(list[i].url);
					break;
				}
			}			
		},
		setUrl(url){
			if(this.isPdf(url)){
				// h5，使用h5访问的时候记得跨域
				// #ifdef H5
				this.navUrl = `${this.viewerUrl}?file=${encodeURIComponent(url)}`;
				// #endif
				// 在安卓和ios手机上
				// 判断是手机系统：安卓，使用pdf.js
				// #ifdef APP-PLUS
				if(plus.os.name === 'Android') {
					this.navUrl = `${this.viewerUrl}?file=${encodeURIComponent(url)}`;
				}
				// ios，直接访问pdf所在路径
				else {
					this.navUrl = encodeURIComponent(url);
				}
				// #endif
			}else{
				this.navUrl = url;
			}
		},
		isPdf(url){
			let index = url.lastIndexOf(".");
			if(index>0)
			{
				let tempUrl = url.substr(index+1, url.length);
				if(tempUrl.toLowerCase()=='pdf') return true;
				return false;
			}
			return false;
		}
	},
	// onBackPress(e) {
	// 	// #ifdef APP-PLUS
	// 	var webElement = this.$el;
	// 	console.log('webView '+webElement)
	// 	return true;
	// 	// #endif
	// },
	onReady(){
		
	},
};
</script>

<style lang="scss"> 
uni-page-body,page,#app{
	height: 100%;
	// .title-padding {//解决异形屏顶部展示问题
	// 	height: var(--status-bar-height);
	// 	box-sizing: content-box;
	// }
	.content{
		height: 100%;
		width: 100%;
		overflow: auto;
		.report-header{
			width: 100%;
			height: 5%;
		}
		.report-area{
			height: 95%;
			display: flex;
			width: 100%;
			.nav-tab{
				height: 45px;
				width: 100%;
			}
			.web-frame{
				margin-top: 45px!important;
				height: 90%;
				width: 100%;
			}
			
		}
	}

	
}

</style>

上一页面跳转该页面预览时代码：

// 文件预览
previewFile(item){
	let fileList = [{name:item.fileName, url:item.fileUrl}];
	uni.navigateTo({
		url:'/pages/index/sign/previewFile?list='+encodeURIComponent(JSON.stringify(fileList))
	})
},

预览PDF文件时发现打包成APP后预览PDF直接下载。后引入pdf.js后可以在线预览

gitee上的链接uni-app-pdf: 在uni-app中使用pdf.js实现在手机上打开pdf

备份下载链接连接：链接：https://pan.baidu.com/s/1rQ5R9880vjjIh1sxy3fy7w 提取码：flm0