当前位置：首页 > VUE

vue实现word预览

2026-01-15 08:06:21VUE

Vue 实现 Word 预览的方法

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

使用第三方库 mammoth.js

mammoth.js 是一个将 Word 文档转换为 HTML 的 JavaScript 库，适合在浏览器端使用。

安装 mammoth.js：

npm install mammoth

在 Vue 组件中使用：

<template>
  <div v-html="convertedHtml"></div>
</template>

<script>
import mammoth from "mammoth";

export default {
  data() {
    return {
      convertedHtml: ""
    };
  },
  methods: {
    async previewWord(file) {
      const arrayBuffer = await file.arrayBuffer();
      const result = await mammoth.convertToHtml({ arrayBuffer });
      this.convertedHtml = result.value;
    }
  }
};
</script>

使用 Office Web Viewer

Office Web Viewer 是微软提供的在线文档预览服务，可以直接嵌入 iframe 使用。

<template>
  <iframe 
    :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`"
    width="100%"
    height="500px"
    frameborder="0"
  ></iframe>
</template>

<script>
export default {
  props: {
    fileUrl: String
  }
};
</script>

使用 docx-preview 库

docx-preview 是一个专门用于预览 Word 文档的 JavaScript 库。

安装 docx-preview：

npm install docx-preview

在 Vue 组件中使用：

<template>
  <div ref="documentContainer"></div>
</template>

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

export default {
  methods: {
    async previewWord(file) {
      const arrayBuffer = await file.arrayBuffer();
      await renderAsync(
        arrayBuffer,
        this.$refs.documentContainer,
        null,
        {
          className: "docx", // 默认和文档样式类名
          inWrapper: true, // 启用包装器
          ignoreWidth: false,
          ignoreHeight: false,
          ignoreFonts: false,
          breakPages: true,
          debug: false,
          experimental: false,
        }
      );
    }
  }
};
</script>

转换为 PDF 再预览

如果项目允许，可以先将 Word 文档转换为 PDF，再使用 PDF 预览方案。

<template>
  <iframe 
    :src="pdfUrl"
    width="100%"
    height="500px"
    frameborder="0"
  ></iframe>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: ""
    };
  },
  methods: {
    async convertToPdf(wordFile) {
      // 这里需要后端服务支持转换
      const formData = new FormData();
      formData.append("file", wordFile);

      const response = await fetch("/api/convert-to-pdf", {
        method: "POST",
        body: formData
      });

      const blob = await response.blob();
      this.pdfUrl = URL.createObjectURL(blob);
    }
  }
};
</script>