docx-preview vue3

### 实现 Vue3 中 DOCX 文件预览

为了在 Vue3 项目中实现 DOCX 文档的在线预览，可以采用两种主要方法：

#### 方法一： 使用 `@vue-office/docx` 组件库

通过安装并配置 `@vue-office/docx` 库来快速集成 DOCX 预览功能。

1. 安装依赖包：

npm install @vue-office/docx

2. 在 Vue 组件中引入必要的模块和样式表[^1]:

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

export default {
  components: {
    VueOfficeDocx,
  },
}

3. 在模板部分定义渲染区域：

<template>
  <div>
    <!-- DOCX 文件展示容器 -->
    <VueOfficeDocx :src="fileUrl" />
  </div>
</template>

<script setup>
// 假设 fileUrl 是一个有效的 DOCX 文件 URL 或 Blob 对象路径
const fileUrl = '/path/to/your/document.docx';
</script>

这种方法简单易用，适合大多数场景下的需求。

#### 方法二： 自定义实现基于 `docx-preview` 的解决方案

对于更复杂的自定义需求，可以选择使用底层工具 `docx-preview` 来手动控制加载过程。

1. 添加所需 NPM 包：

npm install docx-preview axios

2. 编写异步函数处理文件获取与显示逻辑[^2]:

import { ref } from 'vue';
import axios from 'axios';
import { renderAsync } from 'docx-preview';

async function loadAndRenderDocx(filePath) {
  const response = await axios.get(filePath, { responseType: 'blob' });
  
  if (response.status === 200) {
    const containerElement = document.getElementById('docx-container');
    
    try {
      await renderAsync(response.data, containerElement);
    } catch(error){
      console.error("Failed to render DOCX:", error);
    }
  }
}

// 调用此函数以加载特定路径上的DOCX文件
loadAndRenderDocx('/czy.docx');

3. HTML 结构设置：

<div id="app">
  <!-- 此处作为 DOCX 内容的实际承载区 -->
  <section id="docx-container"></section>
</div>

这两种方式各有优劣，在实际开发过程中可根据具体应用场景和个人偏好做出选择。