vue使用iframe预览 pdf、word、xls 文件方法

<template>
	<div>
		<!-- word -->
		<iframe
			:src="docx"
			frameborder="0"
			style="height: 60vh; width: 32vw"
		></iframe>
		<!-- excel -->
		<iframe
			:src="excel"
			frameborder="0"
			style="height: 60vh; width: 32vw"
		></iframe>
		<!-- pdf -->
		<iframe
			:src="pdf"
			frameborder="0"
			style="height: 60vh; width: 32vw"
		></iframe>
	</div>
</template>

<script>
export default {
	// http://view.officeapps.live.com/op/view.aspx?src= 是支持在线预览链接的示例 docx,.xlsx,.pptx

	// 直接访问：https://view.officeapps.live.com/op/view.aspx?src=URL 会出现打不开的问题:
	// 1、如果是前端js之类，处理办法是给URL采用encodeURIComponent()方法。
	// 2、或者在服务器端转码urlencode('URL')过后输出到前端。
	data() {
		return {
			docx:
				`https://view.officeapps.live.com/op/view.aspx?src=` +
				encodeURIComponent('http://static.shanhuxueyuan.com/test6.docx'),
			excel:
				`https://view.officeapps.live.com/op/view.aspx?src=` +
				encodeURIComponent('http://static.shanhuxueyuan.com/demo/excel.xlsx'),
			pdf: 'http://static.shanhuxueyuan.com/test.pdf'
		}
	},
	mounted() {},
	methods: {}
	// https://501351981.github.io/vue-office/examples/docs/guide/  其他实现地址参考
}
</script>