vue 文件预览(docx、.xlsx、pdf)

1.ifream

<iframe src="" ></iframe> 

注: src里面是文件地址

2.vue-office

     支持vue2和vue3提供docx、.xlsx、pdf多种文档的在线预览方案

    2.1安装

#docx文档预览组件
npm install @vue-office/docx vue-demi#excel文档预览组件
npm install @vue-office/excel vue-demi#pdf文档预览组件
npm install @vue-office/pdf vue-demi

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

代码(与ifrem用法类似)

doc:目前只支持docx文件预览，不支持doc文件

excil:目前只支持xlsx文件预览，不支持xls文件

pdf:无

注:doc,excil,pdf代码基本一致(以docx为例)

<template><vue-office-docx:src="docx"style="height: 100vh;"@rendered="renderedHandler"@error="errorHandler"/>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'export default {components: {VueOfficeDocx},data() {return {docx: '' //设置文档网络地址，可以是相对地址}},methods: {renderedHandler() {console.log("渲染完成")},errorHandler() {console.log("渲染失败")}}
}
</script>

上传文件预览: 如果是原生的input type="file"，也是类似的

<template><div id="docx-demo"><el-upload:limit="1":file-list="fileList"accept=".docx":beforeUpload="beforeUpload"action=""><el-button size="small" type="warning">点击上传</el-button></el-upload><vue-office-docx :src="src"/></div>
</template><script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'export default {components: {VueOfficeDocx},data() {return {src: '',fileList: []}},methods: {//在beforeUpload中读取文件内容beforeUpload(file) {let reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = (loadEvent) => {let arrayBuffer = loadEvent.target.result;this.src = arrayBuffer};return false}}
}
</script>