当前位置：首页 > VUE

vue实现导出word

2026-02-18 17:03:31VUE

Vue 实现导出 Word 文档的方法

在 Vue 项目中实现导出 Word 文档功能，可以通过以下方法实现：

使用 docx 库生成 Word 文档

安装 docx 库：

npm install docx

创建一个导出 Word 的组件或方法：

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

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

      const blob = await Packer.toBlob(doc);
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'document.docx';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}

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

安装 html-docx-js 库：

npm install html-docx-js

实现方法：

import htmlDocx from 'html-docx-js';

export default {
  methods: {
    exportHTMLToWord() {
      const html = '<h1>Hello World</h1><p>This is a paragraph</p>';
      const docx = htmlDocx.asBlob(html);
      const url = URL.createObjectURL(docx);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'document.docx';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}

使用 FileSaver.js 保存文件

安装 FileSaver.js：

npm install file-saver

结合 docx 使用：

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

export default {
  methods: {
    async saveWordDocument() {
      const doc = new Document({
        // 文档内容
      });

      const blob = await Packer.toBlob(doc);
      saveAs(blob, 'document.docx');
    }
  }
}

使用模板方式导出复杂 Word 文档

对于复杂格式的 Word 文档，可以：

创建一个 Word 模板文件 (.docx)
使用 docxtemplater 库填充数据

安装依赖：

npm install docxtemplater pizzip

实现代码：

import Docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import { saveAs } from 'file-saver';

export default {
  methods: {
    exportWithTemplate() {
      // 加载模板文件
      fetch('/template.docx')
        .then(response => response.arrayBuffer())
        .then(buffer => {
          const zip = new PizZip(buffer);
          const doc = new Docxtemplater().loadZip(zip);

          // 设置模板数据
          doc.setData({
            name: 'John Doe',
            date: new Date().toLocaleDateString()
          });

          try {
            doc.render();
            const out = doc.getZip().generate({ type: 'blob' });
            saveAs(out, 'output.docx');
          } catch (error) {
            console.error(error);
          }
        });
    }
  }
}