借助vue-office实现word文件预览

我们使用语雀写文章时会在文档中插入word或者excel等文件

比如我之前找的一些手持机信息

我会将该产品的参数通过word导入进来, 也会通过小眼睛, 对我们的文档进行预览

所以, 我查找了一些插件, 发现了一个代码量很少的插件就是vue-office

所以我先去打开了该插件文档进行查看

https://501351981.github.io/vue-office/examples/docs/guide/

我们先看一下该插件的介绍

随后我们就代码落地一下

我们先创建一个vue3项目

npm init vue@latest// 一路回车cd 文件夹名npm installnpm run dev

一顿操作猛如虎

我们的项目终于打开了, 我们将App.vue文件内容删除掉, 只保留最原始的内容

<script setup> </ script><template> </ template><style> </ style>

这时候, 我们使用一下element ui, 因为后面我们要用el-upload组件

# NPM$ npm install element-plus --save

安装完成之后, 我们在main.js入口文件引入并挂载

紧接着, 我们安装一下vue-office的word组件

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

安装完docx文档预览组件之后, 在App.vue组件中引入

import VueOfficeDocx from '@vue-office/docx'import '@vue-office/docx/lib/index.css'

需要将上传之后的src传递给该组件接收

所以, 我们创建一个响应式src

const src = ref('');
<vue-office-docx :src="src" />

这时候, 我们来写一个upload上传文件

<el-upload :limit="1" :file-list="fileList" accept=".docx" :beforeUpload="beforeUpload" action=""> <el-button size="small" type="warning">点击上传</el-button></el-upload>

处理一下上传回调file

const fileList = ref([]);const beforeUpload = (file) => { let reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = (loadEvent) => { let arrayBuffer = loadEvent.target.result; src.value = arrayBuffer }; return false}

这样我们的功能就实现了

我们来看一下吧