当前位置：首页 > VUE

vue实现Word模板

2026-01-18 12:06:52VUE

Vue 实现 Word 模板的方法

使用 docxtemplater 库

docxtemplater 是一个 JavaScript 库，可以在前端或后端生成 Word 文档。它支持模板变量替换，适合在 Vue 项目中使用。

安装依赖：

npm install docxtemplater pizzip file-saver

示例代码：

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

export default {
  methods: {
    generateDocument() {
      // 加载模板文件
      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();
          } catch (error) {
            console.error(error);
          }

          // 生成并下载文档
          const out = doc.getZip().generate({ type: 'blob' });
          saveAs(out, 'output.docx');
        });
    }
  }
}

使用 officegen 库

officegen 是另一个生成 Office 文档的 Node.js 库，适合在服务端使用。

安装依赖：

npm install officegen

服务端示例：

const officegen = require('officegen');
const fs = require('fs');

function createWordDoc(data) {
  const docx = officegen('docx');
  docx.on('finalize', function(written) {
    console.log('Document created');
  });

  docx.on('error', function(err) {
    console.log(err);
  });

  const pObj = docx.createP();
  pObj.addText(data.title, { font_size: 22, align: 'center' });

  const out = fs.createWriteStream('output.docx');
  docx.generate(out);
}

使用纯前端方案

对于简单的文档生成，可以使用 HTML 转 Word 的方式：

function exportToWord(html, filename = 'document.doc') {
  const preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
  const postHtml = "</body></html>";
  const html = preHtml + document.getElementById('exportContent').innerHTML + postHtml;

  const blob = new Blob(['\ufeff', html], {
    type: 'application/msword'
  });

  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

使用模板引擎

对于复杂的文档，可以结合模板引擎如 Handlebars：

vue实现Word模板

import Handlebars from 'handlebars';

function compileTemplate(template, data) {
  const compiled = Handlebars.compile(template);
  return compiled(data);
}

// 使用示例
const wordTemplate = `{{title}}
{{content}}`;

const data = {
  title: 'Document Title',
  content: 'This is the document content'
};

const result = compileTemplate(wordTemplate, data);
// 然后将结果导出为Word文档