当前位置：首页 > VUE

vue实现word预览

2026-03-08 10:47:11VUE

Vue 中实现 Word 文档预览的方法

使用 `mammoth.js` 解析 `.docx` 文件

安装 mammoth.js 库：

npm install mammoth

在 Vue 组件中解析并渲染 .docx 文件：

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

<script>
import mammoth from "mammoth";

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

使用 `docx-preview` 库实现原生样式预览

安装 docx-preview：

npm install docx-preview

在 Vue 组件中使用：

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

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

export default {
  methods: {
    async handleFileChange(e) {
      const file = e.target.files[0];
      if (!file) return;

      const container = this.$refs.previewContainer;
      const arrayBuffer = await file.arrayBuffer();
      await renderAsync(arrayBuffer, container);
    }
  }
};
</script>

转换为 PDF 后预览（需后端配合）

安装 pdf-lib 用于前端 PDF 操作（可选）：

npm install pdf-lib

通过接口将 Word 转换为 PDF：

async function convertToPdf(file) {
  const formData = new FormData();
  formData.append("file", file);

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

使用 Office 365 在线预览（商业方案）

嵌入 Office Online 预览功能：

vue实现word预览

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

<script>
export default {
  computed: {
    encodedUrl() {
      return encodeURIComponent("https://your-domain.com/path/to/file.docx");
    }
  }
};
</script>