<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>
vue使用iframe预览 pdf、word、xls 文件方法
于 2023-09-05 16:54:48 首次发布