当前位置：首页 > VUE

vue实现word预览

2026-03-28 21:39:43VUE

Vue 实现 Word 预览的方法

使用 `mammoth.js` 解析 `.docx` 文件

安装依赖：

npm install mammoth

示例代码：

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

<script>
import mammoth from "mammoth";

export default {
  data() {
    return {
      htmlContent: "",
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (e) => {
        mammoth.extractRawText({ arrayBuffer: e.target.result })
          .then((result) => {
            this.htmlContent = result.value;
          });
      };

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

使用 `docx-preview` 库

安装依赖：

npm install docx-preview

示例代码：

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

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

export default {
  methods: {
    previewDocx(event) {
      const file = event.target.files[0];
      const container = this.$refs.docxContainer;

      renderAsync(file, container)
        .catch((err) => {
          console.error("预览失败:", err);
        });
    },
  },
};
</script>

转换为 PDF 后预览

安装依赖：

npm install pdf-lib

示例代码：

<template>
  <div>
    <input type="file" @change="convertToPdf" accept=".docx" />
    <iframe v-if="pdfUrl" :src="pdfUrl" width="100%" height="500px"></iframe>
  </div>
</template>

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

export default {
  data() {
    return {
      pdfUrl: null,
    };
  },
  methods: {
    async convertToPdf(event) {
      const file = event.target.files[0];
      const arrayBuffer = await file.arrayBuffer();
      const pdfDoc = await PDFDocument.create();
      const page = pdfDoc.addPage();

      // 添加自定义内容（需根据实际需求调整）
      page.drawText("Word 转 PDF 预览", {
        x: 50,
        y: 500,
        size: 30,
      });

      const pdfBytes = await pdfDoc.save();
      const blob = new Blob([pdfBytes], { type: "application/pdf" });
      this.pdfUrl = URL.createObjectURL(blob);
    },
  },
};
</script>

通过后端服务转换

如果前端方案不满足需求，可以通过后端将 Word 转换为 HTML 或 PDF 后返回给前端显示。

示例 API 调用：

vue实现word预览

<template>
  <div>
    <input type="file" @change="uploadFile" accept=".docx" />
    <div v-if="previewUrl">
      <iframe :src="previewUrl" width="100%" height="500px"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: null,
    };
  },
  methods: {
    async uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append("file", file);

      try {
        const response = await fetch("/api/convert", {
          method: "POST",
          body: formData,
        });
        const result = await response.json();
        this.previewUrl = result.url;
      } catch (error) {
        console.error("转换失败:", error);
      }
    },
  },
};
</script>