当前位置：首页 > VUE

vue实现word文件预览

2026-02-23 17:56:16VUE

使用 docx-preview 库实现预览

安装 docx-preview 库：

npm install docx-preview

在 Vue 组件中使用：

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

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

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

使用 mammoth.js 转换为 HTML

安装 mammoth.js：

vue实现word文件预览

npm install mammoth

转换并显示 Word 内容：

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

script>
import mammoth from 'mammoth';

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

使用 Office Web Viewer 在线预览

通过 iframe 嵌入微软官方预览服务：

vue实现word文件预览

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

使用 PDF.js 间接预览

先将 Word 转换为 PDF，再用 PDF.js 预览：

<template>
  <canvas ref="pdfCanvas"></canvas>
</template>

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

export default {
  methods: {
    async showPdf(pdfUrl) {
      const loadingTask = pdfjsLib.getDocument(pdfUrl);
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);

      const viewport = page.getViewport({ scale: 1.0 });
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');

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

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

使用纯前端解决方案

对于简单文档，可以使用 FileReader API：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept=".doc,.docx" />
    <div v-html="fileContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileContent: ''
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      const reader = new FileReader();

      reader.onload = (event) => {
        // 这里需要添加解析逻辑
        this.fileContent = event.target.result;
      };

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