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

1、用到的插件:

import XlsxTemplate from ‘xlsx-template’
import JSZipUtils from ‘jszip-utils’
import {saveAs} from ‘file-saver’

2、表格模板绑定变量:

  1. 非table行数据,直接用 ${tjr}绑定,必须要与代码template.substitute(sheetNumber, values)的value字段保持一一对应
  2. table行数据,用 ${table:lists.age} 绑定,lists字段必须与template.substitute(sheetNumber, values)的value字段一致
    在这里插入图片描述

在这里插入图片描述

3、代码

注意!一定要做同步处理,因为JSZipUtils.getBinaryContent("…/…/static/file/dfhsltj.xlsx")需要一定时间

<a @click="exportTable"><i class="iconfont icon-download" ></i>导出</a>
async exportTable(){
			//如果需要请求接口来获取渲染的数据,则需要给接口添加async,把exportTable前面的async删掉
			//apiFunction(xx).then(async res=> {})
			try{
                //获得Excel模板的buffer对象
                const exlBuf = await JSZipUtils.getBinaryContent("../../static/file/dfhsltj.xlsx");
                // Create a template
                var template = new XlsxTemplate(exlBuf);
                // Replacements take place on first sheet
                var sheetNumber = 1;
                // Set up some placeholder values matching the placeholders in the template
                var values = {//数据需要自己提前准备好
                    zwyfq,
                    zwyfz,
                    tjr,
                    tjsj,
                    lists
                };

                // Perform substitution
                template.substitute(sheetNumber, values);
                // Get binary data
                var out = template.generate({type: 'blob'});
                saveAs(out, "Excel表格导出数据.xlsx");
              } catch (e) {
                console.log(e);
              }
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值