dingzhou-app/pages/office/office.vue

<template>
	<div class="wrap">
		 <web-view :src="filePath" :update-title="false"></web-view>
	</div>
</template>

<script>
	import {Base64} from 'js-base64'
	var wv
	var currentWebview 
	//引入相关样式
	export default {
		data() {
			return {
				filePath: "", // 预览地址
				path: "", // 文件类型
				list1:[],
				list2:[]
			};
		},
		onLoad(options) {
			uni.showLoading({
				title:"加载中..."
			})
			currentWebview = this.$scope.$getAppWebview() //获取当前页面的webview对象
			currentWebview.onLoad = this.loadSuccess()
			this.filePath =`http://121.28.24.104:13898/app/kkfile/onlinePreview?url=${encodeURIComponent(Base64.encode(options.url))}` 
			this.path = options.url
		},
		onNavigationBarButtonTap(e) {
			let that = this
		    uni.showLoading({
		    	title:"打开中...",
		    })
		    if(that.list1.indexOf(that.path) == -1){
		    	uni.downloadFile({
		    	  url:that.path,
		    	  success: function(res) {
					  console.log(res)
		    	    if (res.statusCode === 200) {
		    			that.list1.push(that.path)
		    			that.list2.push(res.tempFilePath)
		    	      uni.openDocument({
		    	        filePath: res.tempFilePath,
		    			success: function (res) {
		    				uni.hideLoading();
		    			}
		    	      });
		    	    }else{
		    			uni.hideLoading()
		    			uni.showToast({
		    				title:"下载失败",
		    				icon:'none'
		    			})
		    		}
		    	  },fail:function(res){
					  console.log(res)
		    		  uni.hideLoading()
		    		  uni.showToast({
		    		  	title:"下载失败",
		    			icon:'none'
		    		  })
		    	  }
		    	});
		    }else{
		    	uni.openDocument({
		    	  filePath: that.list2[that.list1.indexOf(that.path)],
		    	  success: function (res) {
		    	  	uni.hideLoading();
		    	  }
		    	});
		    }
		},
		methods: {
			loadSuccess(){
				uni.hideLoading()
			}
		},
		onReady() {
			setTimeout(function() {
				wv = currentWebview.children()[0]
				wv.setStyle({scalable:true})
			}, 1000); //如果是页面初始化调用时，需要延时一下
		}
	};
</script>

<style scoped lang="scss">

	.wrap {
		width: 100vw;
		height: 100vh;
		padding: 40px 0 0 0;


		.content {
			white-space: pre;
			width: 100%;
			height: 100%;
			padding: 20px 10px;
			background: #fff;
			overflow-x: auto;
		}

		.van-loading {
			background-color: #fff;
			position: absolute;
			width: 100vw;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>