vue---Word文档下载---前端做好的现成模板(模板内有变量,需要替换成页面对应的数据)

1、需要用到的插件

import docxtemplater from ‘docxtemplater’
import PizZip from ‘pizzip’
import JSZipUtils from ‘jszip-utils’
import {saveAs} from ‘file-saver’

2、word文档绑定变量

在这里插入图片描述

3、代码

<el-button type="primary"  icon="el-icon-download" size="small"  @click="downloadWord">Word形式导出内容</el-button>
downloadWord(){
// 读取并获得模板文件的二进制内容
                        JSZipUtils.getBinaryContent("../../static/file/ykxzslScsqb.docx", function(error, content) {
                            // model.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
                            // 抛出异常
                            if (error) {
                                throw error;
                            }
                            // 创建一个PizZip实例,内容为模板的内容
                            let zip = new PizZip(content);
                            // 创建并加载docxtemplater实例对象
                            let doc = new docxtemplater().loadZip(zip);
                            // 设置模板变量的值,同步把对应变量绑定到word模板中(见此博客步骤2)
                            let docxData = {//数据处理
                          		name:xxx,
                          		age:xxx,
                          		jyfjqd:[{info:111},{info:222},{info:333}],
                          		gcjsdw:xxx,
                          		jysqsj:xxx
                          		...
                            };

                            doc.setData({
                                ...docxData
                            });

                            try {
                                // 用模板变量的值替换所有模板变量
                                doc.render();
                            } catch (error) {
                                // 抛出异常
                                let e = {
                                    message: error.message,
                                    name: error.name,
                                    stack: error.stack,
                                    properties: error.properties
                                };
                                console.log(JSON.stringify({ error: e }));
                                throw error;
                            }

                            // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
                            let out = doc.getZip().generate({
                                type: "blob",
                                mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                            });
                            // 将目标文件对象保存为目标类型的文件,并命名
                            saveAs(out,"Word形式导出内容.docx");
                        });
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值