纯前端实现文件的导出(操作简单,也可设置简单的xlsx的样式)

引入插件
npm install js-export-excel
or
yarn add js-export-excel

// 直接导出文件
const ExportJsonExcel = require("js-export-excel");
import {Tooltip } from 'antd';

const onExportClick = ()=>{
	let option = {};
	option.fileName = "excel"; //导出的文件名
	
	option.datas = [ 
	  {
	    sheetData: [//数据源
	      { one: "一行一列", two: "一行二列" },
	      { one: "二行一列", two: "二行二列" },
	    ],
	    sheetName: "sheet",
	    sheetFilter: ["two", "one"],
	    sheetHeader: ["第一列", "第二列"], //设置表头文本,顺序与sheetFilter数组内字段按顺序对应
	    columnWidths: [20, 20], //行宽,可不设置
	  },
	  {
	    sheetData: [
	      { one: "一行一列", two: "一行二列" },
	      { one: "二行一列", two: "二行二列" },
	    ],
	  },
	];
	
	var toExcel = new ExportJsonExcel(option); //new
	toExcel.saveExcel(); //保存
}
return (
	<Tooltip title="导出" mouseEnterDelay={1}>
      <div
        style={{ marginRight: '10px' }}
        onClick={() => onExportClick(record)}
      >
        <i className="iconfont icon-xiajiang"></i>
      </div>
    </Tooltip>
)

还可以支持导出Blob,支持压缩等其他操作,暂不支持导入
参考源码git 地址链接: https://github.com/kinddde/js-export-excel

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值