纯前端实现数据导出.xlxs文件

先上代码。以下是封装的一个前端 导出.xlxs文件的方法

data为数据源,也就是要下载的数据数组;

tableHeader 为表格的表头字符串String,例如:let str = ‘姓名, 地址, 电话’;

contrastRelation 为表头与内容的对应关系,防止内容位置错乱,造成表头与数据不相符的情况,格式为对象Object。例如: let contrastRelation = {"姓名":"name", "地址": "address", "电话":"phone"};

fileName 为导出文件的名称,格式为字符串String

使用方法:downLoadExcel(data, str, contrastRelation, '测试数据')

//前端xlxs文件导出
function downLoadExcel(data, tableHeader, contrastRelation, fileName) {
  //表头
  let str = tableHeader;
  //增加\t为了不让表格显示科学计数法或者其他格式
  data.forEach(keys => {
    for(let item in contrastRelation) {
      str+=`${keys[contrastRelation[item]] + '\t'},`;
    }
		str+='\n';
  })
  // encodeURIComponent解决中文乱码
  let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
  //通过创建a标签实现
  let link = document.createElement("a");
  link.href = uri;
  //下载的文件命名
  link.download = `${fileName || '表格数据'}.xlxs`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值