一、概述

docxtemplater 插件是将文档模板结合数据生成真正文档的非常强大工具，对于仅数据发生变化而文档格式固定的文档生成需求，该工具非常好用。

体现在以下三点：

1.生成的文档会继承模板的字体样式，拿来即用，非常快捷方便。因为其所做的不过是把数据插入模板所在位置。

2.支持常用的模板语法。比如条件判断、数组遍历等。

3.支持自定义过滤器。过滤器会在数据插入模板前执行，方便我们对数据进行二次处理，比如比较复杂或者需复用的计算逻辑和判断逻辑等，都可以单独创建一个过滤器以我们更熟悉的js语法处理，同时过滤器还支持链式调用。一起来看看吧！

(1)vue使用docxtemplater导出word

1.安装 docxtemplater 等相关依赖

npm i docxtemplater pizzip jszip-utils file-saver

2.import引入

import docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';

3.使用方式

import docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';

  const docxData = {
    key:1234,
    value:'1234'
  }
const exportData = (docxData,docName='demo.docx') =>{
  JSZipUtils.getBinaryContent(`./static/模版.docx(可以指定全路径)`, (error, content) => {
      const zip = new PizZip(content);
      const doc = new docxtemplater();
      doc.loadZip(zip);
      // 设置数据
      doc.setData(docxData);
      try {
        doc.render();
      } catch (err) {
        throw err;
      }
      const out = doc.getZip().generate({
        type: 'blob',
        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      });
      saveAs(out, docName);
    });
}

(2)cdn引入使用docxtemplater导出word

1.cdn下载地址

cdn.jsdelivr.net

2.使用方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="../static/favicon.ico"/>
    <!-- 引入docxtemplater的依赖库 -->
    <script src="../static/doc/pizzip.min.js"></script>
    <script src="../static/doc/jszip-utils.min.js"></script>
    <!-- 引入docxtemplater库 -->
    <script src="../static/doc/docxtemplater.min.js"></script>
    <!-- 引入FileSaver.js库 -->
    <script src="../static/doc/FileSaver.min.js"></script>
    <title>demo</title>
</head>
<body>

<script>
const docxData = {
    key:1234,
    value:'1234'
 }
const exportData = (docxData,docName='demo.docx') =>{
JSZipUtils.getBinaryContent(`./static/模版.docx(可以指定全路径)`, (error, content) => {
    const zip = new PizZip(content);
    const doc = new docxtemplater();
    doc.loadZip(zip);
    // 设置数据
    doc.setData(docxData);
    try {
        doc.render();
    } catch (err) {
        throw err;
    }
    const out = doc.getZip().generate({
        type: 'blob',
        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    });
    saveAs(out,docName);
});
}
</script>
</body>
</html>

(3) 模版处理在docx 模版中使用同名占位符

// 例如
const docxData = {
    key:1,
    value:'张三',
    arr:[
        {
            id:1,
            name:'李四'
        },
        {
            id:2,
            name:'john'
        }
    ]
 }
// 在模版docx中填入（随意填，想在哪写在哪写）
{key} {value}
{#arr}{id}-{name}{/arr}
// 导出结果
1 张三
1-李四2-john

前端使用docxtemplater导出word