Vue3 docx-preview在线预览word文件

### Vue3 实现 DOCX 文件在线预览解决方案

为了实现在 Vue3 项目中对 DOCX 文件的在线预览功能，可以采用 `docx-preview` 插件来处理前端展示逻辑。此插件能够接收 DOCX 格式的二进制数据并在浏览器端直接渲染文档内容[^3]。

#### 安装依赖库
首先，在项目根目录下执行命令安装必要的 npm 包：

npm install docx-preview axios form-data

#### 创建组件结构
创建一个新的 Vue 组件用于封装 DOCX 预览的功能模块。这里假设命名为 `DocxPreview.vue`:

<template>
  <div class="preview-container">
    <!-- 加载提示 -->
    <el-loading v-if="loading"></el-loading>

    <!-- DOCX 内容容器 -->
    <div ref="contentContainer" class="docx-content"></div>
    
    <!-- 错误消息显示区域 -->
    <p v-show="error">{{ error }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import DocxPreview from 'docx-preview';

const props = defineProps({
  src: String,
});

// 初始化状态变量
let loading = ref(true);
let contentContainer = ref(null as HTMLElement | null);
let error = ref('');

onMounted(() => {
  fetchDocument();
});

watch(
  () => props.src,
  async (newSrc) => {
    await fetchDocument(newSrc);
  }
);

async function fetchDocument(url?: string) {
  try {
    let response;
    if (!url && !props.src) throw new Error('No source provided');
    const targetUrl = url || props.src;

    // 获取DOCX文件作为Blob对象
    response = await fetch(targetUrl);
    if (!response.ok) throw new Error(`Failed to load document ${targetUrl}`);

    const blobData = await response.blob();

    // 渲染DOCX内容到页面上
    renderDocx(blobData);
  } catch (err) {
    console.error(err.message);
    error.value = err.message;
  } finally {
    loading.value = false;
  }
}

function renderDocx(data: Blob): void {
  if (!contentContainer.value) return;

  // 移除旧的内容以防重复加载
  while (contentContainer.value.firstChild) {
    contentContainer.value.removeChild(contentContainer.value.firstChild);
  }

  // 使用docx-preview解析并插入DOM节点
  DocxPreview.renderAsync({ data }, contentContainer.value).then((_) => {
    // 当新文档被成功加载时滚动回顶部位置
    setTimeout(() => {
      window.scrollTo(0, 0);
    });
  }).catch(console.error);
}
</script>

<style scoped>
.preview-container {
  width: 100%;
  height: auto;
  min-height: calc(100vh - var(--header-height));
  padding-top: 2rem;
  box-sizing: border-box;
}

.docx-content {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}
</style>

上述代码实现了如下特性：
- 支持通过属性传递 DOCX 文件 URL 地址；
- 自动检测源地址变化，并重新获取最新版本的数据；
- 利用 `fetch()` 函数下载远程资源为 Blob 对象；
- 调用 `docx-preview` 的 API 方法完成 DOM 结构构建工作；
- 添加了简单的错误处理机制以及视觉反馈（如加载指示器）；

每当切换不同的 Word 文档链接时，会触发监听函数自动调整视图回到最上方的位置[^1]。