企业网站每年的费用最新新闻播报
在此，我只使用了docx和excel， pdf我直接使用的iframe进行的展示就不作赘述了
//docx文档预览组件
npm install @vue-office/docx//excel文档预览组件
npm install @vue-office/excel//pdf文档预览组件
npm install @vue-office/pdf如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api/
<template><div><inputid="file"ref="files"type="file"@change="changeHandle"multiple="multiple"/><!-- accept=".doc,.docx,.pdf,.ai,.psd,.xlsx,.xls" --><!-- <vue-office-docx :src="src" @rendered="renderingCompleted" /> --><vue-office-excelstyle="flex: 1; height: 0"v-show="src":src="src"@rendered="renderingCompleted"/></div>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from "@vue-office/excel";
import '@vue-office/excel/lib/index.css'
export default {data() {return {src: "",};},components: {VueOfficeDocx,VueOfficeExcel,},mounted() {//赋值文档路径 此目录可以是http地址，也可以是本地文件// const src = ref("./src/assets/docx/test.docx");},methods: {// 获取文件 这里是使用的 vue3.0 语法changeHandle(event) {console.log(event.target.files[0]);const file = event.target.files[0];let fileReader = new FileReader();fileReader.readAsArrayBuffer(file);fileReader.onload = () => {this.src = fileReader.result;};// const blob = new Blob([file], { type: "application/pdf;charset=utf-8" });// const blob = new Blob([file], { type: file.type });// this.src = window.URL.createObjectURL(blob); //这里是通过blob拿到urlconsole.log("src--", this.src);},renderingCompleted() {console.log("渲染完成");},},
};
</script><style>
</style>
参考：
1、vue + vue-office 实现多种文件(docx、excel、pdf)的预览
2、vue 预览word、excel、pdf文档 vue-office（VueOfficeDocx、VueOfficeExcel、VueOfficePdf）
3、vue 实现 word/excel/ppt/pdf 等文件格式预览操作
4、npm官网解释vue-office