当前位置：首页 > VUE

vue实现预览word

2026-01-17 04:12:50VUE

Vue 实现预览 Word 文档的方法

在 Vue 项目中实现 Word 文档预览，可以通过多种方式完成。以下是几种常见的方法：

使用 `mammoth.js` 解析 Word 文档

mammoth.js 是一个 JavaScript 库，可以将 .docx 文件转换为 HTML，便于在网页中预览。

安装依赖：

npm install mammoth

在 Vue 组件中使用：

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

<script>
import * as mammoth from "mammoth";

export default {
  data() {
    return {
      previewContent: "",
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (e) => {
        const arrayBuffer = e.target.result;
        mammoth.extractRawText({ arrayBuffer })
          .then((result) => {
            this.previewContent = result.value;
          })
          .catch((error) => {
            console.error("Error parsing Word document:", error);
          });
      };

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

使用 `docx-preview` 库

docx-preview 是一个专门用于预览 Word 文档的库，支持更丰富的样式渲染。

安装依赖：

npm install docx-preview

在 Vue 组件中使用：

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

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

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const container = this.$refs.previewContainer;

      renderAsync(file, container)
        .catch((error) => {
          console.error("Error rendering Word document:", error);
        });
    },
  },
};
</script>

使用第三方服务（如 Google Docs Viewer）

如果不想在前端解析 Word 文档，可以通过第三方服务（如 Google Docs Viewer）实现预览。

在 Vue 组件中使用：

vue实现预览word

<template>
  <div>
    <iframe
      :src="`https://docs.google.com/gview?url=${fileUrl}&embedded=true`"
      frameborder="0"
      style="width: 100%; height: 500px;"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: "https://example.com/document.docx",
    };
  },
};
</script>