当前位置：首页 > VUE

vue实现word文档预览

2026-02-21 08:46:32VUE

Vue 实现 Word 文档预览

使用 `mammoth.js` 转换 Word 为 HTML

mammoth.js 是一个将 .docx 文件转换为 HTML 的库，适合在 Vue 中实现轻量级预览。

安装依赖：

npm install mammoth.js

示例代码：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".docx" />
    <div v-html="htmlContent"></div>
  </div>
</template>

<script>
import mammoth from "mammoth";

export default {
  data() {
    return {
      htmlContent: "",
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        mammoth
          .extractRawText({ arrayBuffer: e.target.result })
          .then((result) => {
            this.htmlContent = result.value;
          });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};
</script>

使用 `docx-preview` 库

docx-preview 提供更专业的 Word 文档渲染效果，支持样式保留。

安装依赖：

npm install docx-preview

示例代码：

<template>
  <div>
    <input type="file" @change="renderDocx" accept=".docx" />
    <div ref="documentContainer"></div>
  </div>
</template>

<script>
import { renderAsync } from "docx-preview";

export default {
  methods: {
    renderDocx(event) {
      const file = event.target.files[0];
      const container = this.$refs.documentContainer;
      renderAsync(file, container).catch((err) => {
        console.error("渲染失败:", err);
      });
    },
  },
};
</script>

通过后端服务转换

若需支持复杂格式或旧版 .doc 文件，可通过后端（如 LibreOffice 或 Python 库）转换为 PDF/HTML 后返回前端显示。

前端示例（假设接口返回 HTML）：

<template>
  <div>
    <input type="file" @change="uploadFile" />
    <iframe v-if="previewUrl" :src="previewUrl" width="100%" height="500px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: "",
    };
  },
  methods: {
    async uploadFile(event) {
      const formData = new FormData();
      formData.append("file", event.target.files[0]);
      const response = await fetch("/api/convert-to-html", {
        method: "POST",
        body: formData,
      });
      this.previewUrl = await response.text();
    },
  },
};
</script>