当前位置：首页 > VUE

vue实现word离线预览

2026-02-25 01:41:06VUE

Vue 实现 Word 文档离线预览

使用 docx-preview 库

docx-preview 是一个专门用于在浏览器中预览 Word 文档的 JavaScript 库，支持 Vue 集成。

安装依赖：

npm install docx-preview

在 Vue 组件中使用：

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

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

export default {
  methods: {
    async previewDocx(file) {
      const container = this.$refs.docxContainer;
      const arrayBuffer = await file.arrayBuffer();
      await renderAsync(arrayBuffer, container);
    }
  }
}
</script>

使用 mammoth.js 转换为 HTML

mammoth.js 可以将 Word 文档转换为 HTML，适合需要自定义样式的场景。

vue实现word离线预览

安装依赖：

npm install mammoth

在 Vue 组件中使用：

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

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

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

使用 Office Web Viewer 本地部署

如果需要更完整的 Office 文档支持，可以考虑本地部署 Office Web Viewer。

vue实现word离线预览

从微软官方获取 Office Web Viewer 的部署包
在本地服务器上部署
在 Vue 中通过 iframe 引用本地服务

<template>
  <iframe 
    :src="`http://localhost:8080/owv/wordviewer.aspx?src=${encodeURIComponent(fileUrl)}`"
    width="100%"
    height="600px"
  ></iframe>
</template>

使用 PDF.js 间接预览

将 Word 转换为 PDF 后，使用 PDF.js 预览。

使用 LibreOffice 或 Word 本身将文档转换为 PDF
在 Vue 中使用 PDF.js 渲染 PDF

安装 PDF.js：

npm install pdfjs-dist

在 Vue 组件中使用：

<template>
  <canvas v-for="page in pages" :key="page" :ref="`canvas-${page}`"></canvas>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist';

export default {
  data() {
    return {
      pages: []
    };
  },
  methods: {
    async renderPdf(pdfUrl) {
      const loadingTask = pdfjsLib.getDocument(pdfUrl);
      const pdf = await loadingTask.promise;

      this.pages = Array.from({ length: pdf.numPages }, (_, i) => i + 1);

      this.$nextTick(() => {
        this.pages.forEach(async (pageNum) => {
          const page = await pdf.getPage(pageNum);
          const viewport = page.getViewport({ scale: 1.0 });
          const canvas = this.$refs[`canvas-${pageNum}`][0];
          const context = canvas.getContext('2d');

          canvas.height = viewport.height;
          canvas.width = viewport.width;

          await page.render({
            canvasContext: context,
            viewport: viewport
          }).promise;
        });
      });
    }
  }
}
</script>