当前位置：首页 > VUE

vue实现word文档实现预览

2026-01-08 03:56:31VUE

在Vue中实现Word文档预览可以通过多种方式实现，以下是几种常见的方法：

使用mammoth.js库

mammoth.js是一个将Word文档（.docx）转换为HTML的JavaScript库，适合在Vue项目中集成。

安装mammoth.js：

npm install mammoth

在Vue组件中使用：

vue实现word文档实现预览

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

<script>
import mammoth from "mammoth";

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

使用Office Online Viewer

通过嵌入微软Office Online Viewer的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>

使用docx-preview库

docx-preview专门用于在浏览器中渲染Word文档，支持样式保留。

安装：

vue实现word文档实现预览

npm install docx-preview

使用示例：

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

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

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

后端转换+前端渲染

如果文档需要复杂处理（如权限控制），可通过后端将Word转为PDF/HTML，前端直接显示转换结果。

前端请求示例：

<template>
  <div v-if="contentType === 'html'" v-html="content"></div>
  <iframe v-else-if="contentType === 'pdf'" :src="content"></iframe>
</template>

<script>
export default {
  data() {
    return {
      contentType: "",
      content: "",
    };
  },
  methods: {
    async fetchPreview(docId) {
      const res = await axios.get(`/api/preview/${docId}`);
      this.contentType = res.data.type;
      this.content = res.data.content;
    },
  },
};
</script>