当前位置：首页 > VUE

vue实现word文档实现预览

2026-02-10 17:28:49VUE

Vue 实现 Word 文档预览

使用 `docx-preview` 库

安装 docx-preview 库，这是一个专门用于在浏览器中预览 Word 文档的轻量级工具。

npm install docx-preview

在 Vue 组件中引入并使用：

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

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

export default {
  methods: {
    async handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const arrayBuffer = await file.arrayBuffer();
        await renderAsync(arrayBuffer, this.$refs.docxContainer);
      }
    }
  }
};
</script>

使用 `mammoth.js` 转换为 HTML

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

安装 mammoth.js：

npm install mammoth

在 Vue 组件中使用：

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

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

export default {
  data() {
    return {
      convertedHtml: ''
    };
  },
  methods: {
    async handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const arrayBuffer = await file.arrayBuffer();
        const result = await mammoth.convertToHtml({ arrayBuffer });
        this.convertedHtml = result.value;
      }
    }
  }
};
</script>

使用 `Office.js`（微软官方）

适用于需要与 Office 365 集成的场景，支持在线和离线预览。

在 public/index.html 中引入 Office.js：

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

在 Vue 组件中使用：

<template>
  <div id="office-container"></div>
</template>

<script>
export default {
  mounted() {
    Office.onReady(() => {
      const container = document.getElementById('office-container');
      Office.context.document.getFileAsync('compressed', {
        sliceSize: 65536
      }, result => {
        if (result.status === Office.AsyncResultStatus.Succeeded) {
          const file = result.value;
          file.getSliceAsync(0, sliceResult => {
            if (sliceResult.status === Office.AsyncResultStatus.Succeeded) {
              container.innerHTML = sliceResult.value.data;
            }
          });
        }
      });
    });
  }
};
</script>

使用第三方服务（如 Google Docs Viewer）

将 Word 文档上传到公共可访问的 URL，通过 Google Docs Viewer 嵌入预览：

vue实现word文档实现预览

<template>
  <iframe 
    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(docUrl)}&embedded=true`" 
    width="100%" 
    height="600px"
    frameborder="0"
  ></iframe>
</template>

<script>
export default {
  data() {
    return {
      docUrl: 'https://example.com/path/to/document.docx'
    };
  }
};
</script>