当前位置：首页 > news >正文

文件预览（pdf、docx、xlsx）

news 2025/10/11 6:05:09

项目开发中遇到一个需求：把一个具有pdf、docx、slsx格式文件的页面导出成一个pdf文件，之前页面使用了iframe展示文件，但是html2canvas无法获取到iframe里面的内容，所以使用了vue-office实现pdf、docx、xlsx文件的在线预览。

1.安装依赖

//pdf
npm install @vue-office/pdf vue-demi  //docx
npm install @vue-office/docx vue-demi //xlsx
npm install @vue-office/excel vue-demi

2.引入组件和相关样式

import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'//引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

export default {data(){return{activeName: 'pdf',}},components: {VueOfficePdf,VueOfficeDocx,VueOfficeExcel},methods: {onRendered(){console.log("🎉 文档渲染完成！");},onError(error){console.error("❌ 渲染文档时出错:", error);}}
}

3.使用组件

<el-tabs v-model="activeName"><el-tab-pane label="pdf预览" name="pdf"></el-tab-pane><el-tab-pane label="word预览" name="word"></el-tab-pane><el-tab-pane label="excel预览" name="excel"></el-tab-pane>
</el-tabs><div v-if="activeName == 'pdf'" class="box"><VueOfficePdfsrc="TEST-1759116431968.pdf"@rendered="onRendered"@error="onError"/>
</div><div v-if="activeName == 'word'" class="box"><VueOfficeDocxsrc="test123456.docx"@rendered="onRendered"@error="onError"/>
</div><div v-if="activeName == 'excel'" class="box"><VueOfficeExcelsrc="test654321.xlsx"@rendered="onRendered"@error="onError"/>
</div>

效果如下：