当前位置：首页 > VUE

vue实现word文档实现预览

2026-03-07 17:16:46VUE

使用 `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 previewDocx(file) {
      const container = this.$refs.container;
      const arrayBuffer = await file.arrayBuffer();
      await renderAsync(arrayBuffer, container);
    }
  }
};
</script>

使用 `mammoth.js` 转换为 HTML

安装 mammoth.js：

npm install mammoth

转换为 HTML 并渲染：

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

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

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

使用 Office Online 在线预览

通过嵌入 Office Online 的 iframe 实现：

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

<script>
export default {
  props: {
    fileUrl: String
  }
};
</script>

使用 `pdf-lib` 转换为 PDF 预览

先转换为 PDF 再预览：

npm install pdf-lib

转换并显示 PDF：

<template>
  <iframe :src="pdfUrl" width="100%" height="500px"></iframe>
</template>

<script>
import { PDFDocument } from 'pdf-lib';

export default {
  data() {
    return {
      pdfUrl: ''
    };
  },
  methods: {
    async convertToPdf(file) {
      const arrayBuffer = await file.arrayBuffer();
      const pdfDoc = await PDFDocument.create();
      // 添加转换逻辑
      const pdfBytes = await pdfDoc.save();
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      this.pdfUrl = URL.createObjectURL(blob);
    }
  }
};
</script>

使用第三方 API 服务

调用如 GroupDocs、Aspose 等服务的 API：

vue实现word文档实现预览

<script>
export default {
  methods: {
    async previewWithApi(file) {
      const formData = new FormData();
      formData.append('file', file);
      const response = await fetch('https://api.example.com/convert', {
        method: 'POST',
        body: formData
      });
      const result = await response.json();
      // 处理返回的预览数据
    }
  }
};
</script>