文件上传预览 vue

文件上传预览 vue

VUE 版本需要vue@2.7.0以上
VUE-TEMPLATE-COMPILER 版本需要vue-template-compiler@2.7.0以上
不相同：Cannot read properties of undefined (reading ‘parseComponent‘)#docx文档预览组件
npm install @vue-office/docx vue-demi#excel文档预览组件
npm install @vue-office/excel vue-demi#pdf文档预览组件
npm install @vue-office/pdf vue-demi可以获取文件的ArrayBuffer、Blob、http 渲染//  docx预览
<template><vue-office-docx :src="docx"style="height: 100vh;"@rendered="rendered"/>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {docx: '.docx'}},methods:{rendered(){console.log("渲染完成")}}
}
</script>
// excel预览
<template><vue-office-excel :src="excel" @rendered="rendered"/>
</template><script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'export default {components:{VueOfficeExcel},data(){return {excel: '.xlsx'//设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>
// pdf预览
<template><vue-office-pdf :src="pdf" @rendered="rendered"/>
</template><script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'export default {components:{VueOfficePdf},data(){return {pdf: '.pdf' //设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>
//  上传预览 其他...
<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(file){let reader = new FileReader();adAsArrayBuffer(file);load = (loadEvent) => {let arrayBuffer = sult;this.src = arrayBuffer};return false}}
}
</script>