docxtemplater 前端h5 生成word 加echart 图 教程

因为是老项目 所以 没有 用vue ,react 那一套

引入js

    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> //echarts 生成图表图片用
    <script src="js/plugins/docxtemplater/docxtemplater.js"></script>//生成word 绑定数据用
    <script src="js/plugins/docxtemplater/pizzip.js"></script>//读写 zip 文件用
    <script src="js/plugins/docxtemplater/FileSaver.js"></script>//文件保存的插件
    <script src="js/plugins/docxtemplater/pizzip-utils.js"></script>
    <script src="js/plugins/docxtemplater/imagemodule.js"></script>//docxtemplater 3.x 版本的免费的 图片插件 有了这个 生成 word才有图
  
    <script src="js/plugins/docxtemplater/angular-parse-browser.js"></script>//angular解析器 ,用于解析aaa[0][0]之类的模版用

初始化js

//载入 word 模版
PizZipUtils.getBinaryContent("js/plugins/docxtemplater/template.docx", function (error, content) {
            if (error) {
                throw error;
            }
            /*
            * 获取到 echarts 绘画出来的图片 具体echart  参考我另外一篇文章
            **/
            var img = myChart.getDataURL({pixelRatio: 2}); 
            
            var data = {"name":"例子","img":img};
            
            //构造图片解析
            const imageOpts = {
                getImage(tag) {
                    return cteateEcharts.base64DataURLToArrayBuffer(tag);
                },
                getSize() {
                    return [600, 400];
                },
                centered: false,
                fileType: "docx",
            };

            var imageModule = new ImageModule(imageOpts);
            // 自定义 解析器 ,可以实现复杂的运算 以及过滤功能, 暂时项目只用到 取二维数组功能,用于解析aaa[0][0]之类的模版用
            function parser(tag) {
                var expressions = require("angular-expressions");
                return {
                    get: tag === '.' ? function(s){ return s;} : function(s) {
                        return expressions.compile(tag.replace(/(’|“|”)/g, "'"))(s);
                    }
                };
            }


            var zip = new PizZip(content);
            var doc = new docxtemplater()
                .loadZip(zip)
                .attachModule(imageModule)//家长图片解析
                .setOptions({
                    nullGetter: function () { //设置空值 undefined 为""
                        return "";
                    },
                    parser: parser,//加载自定义解析器
                })
                .setData(data)//加载要生成word文档的数据
                .render();

            var out = doc.getZip().generate({
                type: "blob",
                mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
            }) //Output the document using Data-URI
            saveAs(out, "社区诊断报告.docx")//生成文件名字
        })

template.docx 模版内的内容

{name}
{%img}

---

更多复杂例子

{
	"tCommunityAreaSocial": {
		"communityAreaSocial1": "2020",
		"medicalInstitutionsData": [
			["综合医院", 12, 3, 4, 5, 6],
			["中医医院", 45, 345, 53, 6, 5],
			["专科医院", 534, 45, 7, 5, 4],
			["社区卫生服务中心/乡镇卫生院", 345, 45, 87, 95, 8],
			["社区卫生服务站/村卫生室", "3", 45, 5, 7, 9]
		]
	}
}

{#tCommunityAreaSocial}
	{communityAreaSocial1}
	{medicalInstitutionsData[0]}
	{medicalInstitutionsData[0][0]}
	

	{#medicalInstitutionsData[0]}
		{.}
	{/}

{/tCommunityAreaSocial}