vue实现word文档

Vue 实现 Word 文档生成与操作

前端生成 Word 文档

使用 docx 库可以动态生成 .docx 文件，适用于纯前端实现：

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

const generateDocx = async () => {
  const doc = new Document({
    sections: [{
      children: [
        new Paragraph({
          children: [new TextRun("Vue生成的Word文档")]
        })
      ]
    }]
  });
  const blob = await Packer.toBlob(doc);
  saveAs(blob, "document.docx");
};

服务端生成方案

通过 Node.js 后端使用模板引擎生成 Word：

const express = require("express");
const docxTemplater = require("docx-templater");
const fs = require("fs");

app.post("/generate-doc", (req, res) => {
  const content = fs.readFileSync("template.docx");
  const doc = docxTemplater.process(content, { data: req.body });
  res.setHeader("Content-Disposition", "attachment; filename=output.docx");
  res.send(doc);
});

浏览器端下载

结合 FileSaver.js 实现自动下载：

import { saveAs } from "file-saver";

const downloadDocx = (content) => {
  const blob = new Blob([content], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
  saveAs(blob, "export.docx");
};

模板替换方案

使用 mammoth.js 处理已有模板：

import mammoth from "mammoth-browser";

mammoth.extractRawText({ arrayBuffer: file })
  .then(result => {
    const processedText = result.value.replace("{{placeholder}}", dynamicValue);
  });

表格数据导出

处理表格数据到 Word：

const table = new Table({
  rows: data.map(item => new TableRow({
    children: [
      new TableCell({ children: [new Paragraph(item.name)] }),
      new TableCell({ children: [new Paragraph(item.value)] })
    ]
  }))
});

样式控制

添加文档样式配置：

const styles = {
  paragraphStyles: [{
    id: "heading",
    name: "Heading",
    run: { size: 32, bold: true }
  }]
};

注意事项

• 复杂格式建议使用服务端生成方案
• 中文需确保字体支持
• 大文件建议分块处理
• 移动端注意兼容性问题