当前位置：首页 > VUE

vue实现word在线预览

2026-02-20 23:39:58VUE

Vue 实现 Word 文档在线预览

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

mammoth.js 是一个浏览器端的库，可将 .docx 文件转换为 HTML，适合预览文档内容。

安装依赖：

npm install mammoth

示例代码：

<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(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (event) => {
        mammoth.extractRawText({ arrayBuffer: event.target.result })
          .then(result => {
            this.previewContent = 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="docxContainer"></div>
  </div>
</template>

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

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

通过后端服务转换

若需支持旧版 .doc 文件或复杂格式，可通过后端转换（如 LibreOffice 或 API 服务）返回 HTML/PDF。

前端调用示例：

<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(e) {
      const formData = new FormData();
      formData.append("file", e.target.files[0]);
      const response = await fetch("/api/convert", {
        method: "POST",
        body: formData
      });
      const { url } = await response.json();
      this.previewUrl = url;
    }
  }
};
</script>

使用微软 Office Online 嵌入

通过嵌入 Office Online 实现原生预览（需公网可访问的文件 URL）：

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