当前位置：首页 > VUE

vue项目实现word预览

2026-01-22 13:30:57VUE

实现Word预览的方法

在Vue项目中实现Word文档预览，可以通过以下几种方式完成。以下是具体实现步骤和代码示例。

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

mammoth.js是一个将.docx文件转换为HTML的库，适合在浏览器端直接解析Word文档。

安装依赖：

npm install mammoth

示例代码：

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

<script>
import mammoth from "mammoth";

export default {
  data() {
    return {
      previewContent: "",
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const arrayBuffer = e.target.result;
        mammoth
          .extractRawText({ arrayBuffer })
          .then((result) => {
            this.previewContent = result.value;
          })
          .catch((err) => {
            console.error(err);
          });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};
</script>

使用`docx-preview`库渲染`.docx`文件

docx-preview是一个专门用于在浏览器中预览Word文档的库，支持样式渲染。

安装依赖：

npm install docx-preview

示例代码：

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

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

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const container = this.$refs.previewContainer;
      renderAsync(file, container).catch((err) => {
        console.error(err);
      });
    },
  },
};
</script>

使用后端服务转换Word为PDF或HTML

如果文档较大或需要更复杂的渲染，可以通过后端将Word文档转换为PDF或HTML，再在前端显示。

后端示例（Node.js + docx-to-pdf）：

npm install docx-to-pdf

const express = require("express");
const docxToPdf = require("docx-to-pdf");
const fileUpload = require("express-fileupload");

const app = express();
app.use(fileUpload());

app.post("/convert", (req, res) => {
  const file = req.files.file;
  docxToPdf(file.data).then((pdfBuffer) => {
    res.send(pdfBuffer);
  });
});

app.listen(3000);

前端调用：

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

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

      const response = await fetch("http://localhost:3000/convert", {
        method: "POST",
        body: formData,
      });
      const blob = await response.blob();
      this.pdfUrl = URL.createObjectURL(blob);
    },
  },
};
</script>

使用Office Online或Google Docs嵌入预览

通过嵌入Office Online或Google Docs的iframe实现预览，无需后端转换。

示例代码：

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

<script>
export default {
  data() {
    return {
      fileUrl: "https://example.com/document.docx",
    };
  },
};
</script>