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: "加载中..."
			})
			console.log('666', options.url)
			// currentWebview = this.$scope.$getAppWebview() //获取当前页面的webview对象
			// currentWebview.onLoad = this.loadSuccess()
			this.filePath =
				`http://121.18.118.242:13898/app/kkfile/onlinePreview?url=${encodeURIComponent(Base64.encode(options.url))}&officePreviewType=pdf`
			this.path = options.url
			uni.hideLoading()

		},
		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) {
						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()
			},
			onWebViewLoaded() {
				console.log('加载完成')
			}
		},
		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>