Vue3借助 vue-office 插件实现 Word 预览

本文介绍了如何在Vue3项目中使用vue-office插件实现Word文档的预览功能。通过创建Vue3项目、安装vue-office插件、设置响应式数据、使用组件以及实现文件上传预览，用户可以方便地展示Word文档。代码示例详细展示了每个步骤的实现方式。

1. 创建 Vue3 项目

首先，我们需要创建一个 Vue3 项目：

npm init vue@latest
pnpm i
npm run dev

运行项目后，将 App.vue 中的代码全部删除，保持页面干净整洁。

2. 安装 vue-office 插件

接下来，安装 vue-office 插件：

pnpm install @vue-office/docx vue-demi

安装完成后，就可以在项目中使用该插件了。我们需要引入组件和相关样式：

// 引入 VueOfficeDocx 组件
import VueOfficeDocx from '@vue-office/docx';
// 引入相关样式
import '@vue-office/docx/lib/index.css';

3. 设置响应式数据

接下来，定义一个响应式数据，用于展示 Word 文档：

import { ref } from 'vue';
const docx = ref('http://static.shanhuxueyuan.com/test6.docx');

4. 在页面中使用组件

在页面中使用 VueOfficeDocx 组件，并绑定一个自定义事件，渲染完成后会自动执行。代码结构如下：

<template>
  <div>
    <VueOfficeDocx :src="docx" @renderComplete="onRenderComplete" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';

const docx = ref('http://static.shanhuxueyuan.com/test6.docx');

const onRenderComplete = () => {
  console.log('文档渲染完成');
};
</script>

5. 文件上传方式预览文档

在开发中，另一种常见情况是通过文件上传来获取文件的 ArrayBuffer 或者 Blob 预览文档。要实现这个功能，可以给 <input> 绑定一个 change 事件，当文件选择完成时，会返回一个 event 对象，通过该对象获取 file 对象：

const onFileChange = (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const arrayBuffer = e.target.result;
    // 使用 arrayBuffer 进行文档预览
    docx.value = arrayBuffer;
  };

  reader.readAsArrayBuffer(file);
};

文件上传部分代码

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <VueOfficeDocx :src="docx" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';

const docx = ref(null);

const onFileChange = (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const arrayBuffer = e.target.result;
    docx.value = arrayBuffer;
  };

  reader.readAsArrayBuffer(file);
};
</script>

6. 总结

通过使用 vue-office 插件，我们可以很方便地在 Vue3 项目中实现 Word 文档的预览功能。无论是通过在线链接还是本地文件上传，插件都能很好地支持。