当前位置：首页 > VUE

Vue实现word导出

2026-02-18 19:08:02VUE

Vue实现Word导出的方法

在Vue项目中实现Word导出功能，可以通过多种方式实现，以下是几种常见的方法：

使用docx库生成Word文档

安装docx库：

npm install docx

创建Word文档并导出：

import { Document, Paragraph, Packer, TextRun } from 'docx';

export default {
  methods: {
    exportToWord() {
      const doc = new Document({
        sections: [{
          properties: {},
          children: [
            new Paragraph({
              children: [
                new TextRun("Hello World"),
                new TextRun({
                  text: "Foo Bar",
                  bold: true,
                }),
              ],
            }),
          ],
        }],
      });

      Packer.toBlob(doc).then(blob => {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'example.docx';
        link.click();
        URL.revokeObjectURL(link.href);
      });
    },
  },
};

使用html-docx-js库将HTML转换为Word

安装html-docx-js库：

npm install html-docx-js

使用示例：

import htmlDocx from 'html-docx-js';

export default {
  methods: {
    exportToWord() {
      const html = '<h1>Hello World</h1><p>This is a test document</p>';
      const converted = htmlDocx.asBlob(html);

      const link = document.createElement('a');
      link.href = URL.createObjectURL(converted);
      link.download = 'document.docx';
      link.click();
      URL.revokeObjectURL(link.href);
    },
  },
};

使用FileSaver.js保存文件

安装FileSaver.js：

npm install file-saver

结合docx库使用：

import { saveAs } from 'file-saver';
import { Document, Packer, Paragraph, TextRun } from 'docx';

export default {
  methods: {
    exportToWord() {
      const doc = new Document({
        sections: [{
          children: [
            new Paragraph({
              children: [
                new TextRun('Export to Word example'),
              ],
            }),
          ],
        }],
      });

      Packer.toBlob(doc).then(blob => {
        saveAs(blob, 'example.docx');
      });
    },
  },
};

使用后端API生成Word文档

如果需要更复杂的Word文档格式，可以调用后端API生成Word文件：

Vue实现word导出

export default {
  methods: {
    async exportToWord() {
      try {
        const response = await axios.post('/api/export-word', {
          data: this.documentData
        }, {
          responseType: 'blob'
        });

        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'document.docx');
        document.body.appendChild(link);
        link.click();
        link.remove();
      } catch (error) {
        console.error('Export failed:', error);
      }
    },
  },
};