react 导出excel文件

一共总结了两种适用范围比较广泛 可以适用导出多级表头合并等.

1、原生js导出  （带样式）

/**
 *  原生JS导出为excel文件
 */
export const jsToExcel = (id, name) => {
    //window.location.href='<%=basePath%>pmb/excelShowInfo.do';
    //获取表格
    var exportFileContent = document.getElementById(id).outerHTML;
    //设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
    //exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
    //var link = "data:"+MIMEType+";base64," + exportFileContent;
    //使用Blob
    var blob = new Blob([exportFileContent], { type: "text/plain;charset=utf-8" });         //解决中文乱码问题
    blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type });
    //设置链接
    var link = window.URL.createObjectURL(blob);
    var a = document.createElement("a");    //创建a标签
    a.download = name;  //设置被下载的超链接目标（文件名）   建议文件后缀为 .xls
    a.href = link;                            //设置a标签的链接
    document.body.appendChild(a);            //a标签添加到页面
    a.click();                                //设置a标签触发单击事件
    document.body.removeChild(a);            //移除a标签
}

使用方式 

 
 
...
 
 jsToExcel('table_report', '现券交易异常日报.xls')}>导出

如果想导出xlsx格式请参考方法2，方法1仅改文件后缀 不会被Excel识别  但是wps可以

2、使用xlsx导出   （此方法导出的excel文件无样式,但导出的文件格式是 xlsx格式的）

首先安装xlsx  ： yarn add xlsx

import XLSX from "xlsx"
 
 
/**
 *  用XLSX导出 (导出无样式)
 */
export const exportExcel = (id, name) => {
    var exportFileContent = document.getElementById(id).cloneNode(true);
    var wb = XLSX.utils.table_to_book(exportFileContent, { sheet: "sheet1" });
    XLSX.writeFile(wb, name);
}

使用方式

 
...
 
 exportExcel('table_report', '现券交易异常日报.xlsx')}>导出