• 所有问题

    • js 导出大数据到excel

    如题所述

    举报该问题
    推荐答案   2020-12-29
    完整代码：

    //导出excelfunction tableToExcel(){
    var arrSor = ["sorttable10","sorttable30","sorttable60","sorttable120"]
    let str = "";
    for (var k = 0; k < arrSor.length; k++) {
    var tab=document.getElementById(arrSor[k]);
    var rows=tab.rows;
    const jsonData = [];
    for(var i=2;i<rows.length;i++){ //遍历表格的行
    var json = {};
    for(var j=0;j<rows[i].cells.length;j++){ //遍历每行的列
    json[(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML;
    }
    jsonData.push(json);
    }
    //列标题
    let str1 = "<tr><td align='center' colspan='5'><b>最大"+arrSor[k].substring(9,arrSor[k].length)+"分钟雨量</b></td></tr>";
    let str2 = "<tr align='center'><th>站点</th><th>站名</th><th>雨量最大值</th><th>降水时段</th><th>落入最大降水时段</th></tr>";
    //循环遍历，每行加入tr标签，每个单元格加td标签
    for(let i = 0 ; i < jsonData.length ; i++ ){
    str2+='<tr>';
    for(let item in jsonData[i]){
    //增加\t为了不让表格显示科学计数法或者其他格式
    var itemTem= jsonData[i][item];
    if (itemTem == "暂无数据") {
    str2+=`<td colspan='5' align='center'>${ itemTem + '\t'}</td>`;
    }else {
    str2+=`<td align='center'>${ itemTem + '\t'}</td>`;
    }
    }
    str2+='</tr>';
    }
    let str3 = "<tr><td colspan='5'></td></tr>";
    str += (str1 + str2 + str3);
    }
    let worksheet = '雨量最大值'
    let uri = 'data:application/vnd.ms-excel;base64,';
    //下载的表格模板数据
    let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset='UTF-8'><!--[if gte mso 9]><xml>
    <x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
    <x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
    <style type="text/css">
    table {border: 1px solid #000000;}
    table tr td b {background:#FFFFFF;color:#3D3D3D;font-size:24px;border: 1px solid #000000;}
    table th {background:#AEE1FE;color:#3D3D3D;font-size:20px;border: 1px solid #000000;}
    table td {background:#FFFFFF;color:#3D3D3D;font-size:20px;border: 1px solid #000000;}</style>
    </head><body><table>${str}</table></body></html>`;
    //下载模板
    // window.location.href = uri + this.base64(template)
    var link = document.createElement("a");
    link.href = uri + this.base64(template);
    link.download = "雨量最大值-" +new Date().format("yyyy年MM月dd日 h时")+ ".xls";
    link.style = "visibility:hidden";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);}//输出base64编码function base64 (template) {
    return window.btoa(unescape(encodeURIComponent(template))) }

    解析：
    遍历取出表，顺序是行从上往下，列从左往右，将数据存进数组，下面再拼接成表。

    image.png
    参考文章：https://blog.csdn.net/hhzzcc_/article/details/80419396
    第一种方法（大量数据导出）

    //导出excelfunction tableToExcel() {
    var arrSor = ["sorttable10","sorttable30","sorttable60","sorttable120"]
    let str = "";
    for (var k = 0; k < arrSor.length; k++) {
    var tab=document.getElementById(arrSor[k]);
    var rows=tab.rows;
    const jsonData = [];
    for(var i=2;i<rows.length;i++){ //遍历表格的行
    var json = {};
    for(var j=0;j<rows[i].cells.length;j++){ //遍历每行的列
    if (rows[i].cells[j].outerHTML.indexOf("rgb(255, 255, 0)") != -1) {
    json["yellow"+(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML;
    }else {
    json[(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML;
    }
    }
    jsonData.push(json);
    }
    //列标题
    let str1 = "<tr><td colspan='5' align='center' style='background-color:#FFFFFF;font-size:24px;border: 1px solid #000000;'><b>最大"
    +arrSor[k].substring(9,arrSor[k].length)+"分钟雨量</b></td></tr>";
    let str2 = "<tr>" +
    "<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>站点</th>" +
    "<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>站名</th>" +
    "<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>雨量最大值</th>" +
    "<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>降水时段</th>" +
    "<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>落入最大降水时段</th></tr>";
    //循环遍历，每行加入tr标签，每个单元格加td标签
    for(let i = 0 ; i < jsonData.length ; i++ ){
    str2+="<tr align='center'>";
    for(let item in jsonData[i]){
    if (item.indexOf("yellow") != -1) {//取列数等于3
    //增加\t为了不让表格显示科学计数法或者其他格式
    var itemTem= jsonData[i][item];
    if (itemTem == "暂无数据") {
    str2+=`<td colspan='5' style='background-color:#FFFF00;font-size:22px;border: 1px solid #000000;'> ${ itemTem + '\t'}</td>`;
    }else {
    str2+=`<td style='background-color:#FFFF00;font-size:22px;border: 1px solid #000000;'> ${ itemTem + '\t'}</td>`;
    }
    }else {
    //增加\t为了不让表格显示科学计数法或者其他格式
    var itemTem= jsonData[i][item];
    if (itemTem == "暂无数据") {
    str2+=`<td colspan='5' style='background-color:#FFFFFF;font-size:22px;border: 1px solid #000000;'> ${ itemTem + '\t'}</td>`;
    }else {
    str2+=`<td style='background-color:#FFFFFF;font-size:22px;border: 1px solid #000000;'> ${ itemTem + '\t'}</td>`;
    }
    }
    }
    str2+='</tr>';
    }
    let str3 = "<tr><td colspan='5' style='background-color:#FFFFFF;border: 1px solid #000000;'></td></tr>";
    str += (str1 + str2 + str3);
    }

    var tableHtml="<html><head><meta charset='UTF-8'></head><body><table>"+str+"</body></html>"
    var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});
    var fileName = "雨量最大值-"+new Date().format("yyyy年MM月dd日 h时")+".xls";
    if(isIE()){
    window.navigator.msSaveOrOpenBlob(excelBlob,fileName);
    }else{
    var oa = document.createElement('a');
    oa.href = URL.createObjectURL(excelBlob);
    oa.download = fileName;
    document.body.appendChild(oa);
    oa.click();
    }} //判断是否IE浏览器function isIE() {
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
    return true;
    } else {
    return false;
    }}

    参考文章：https://blog.csdn.net/qq_34169240/article/details/84231226
    温馨提示：答案为网友推荐，仅供参考
    相似回答
    jquery.table2excel.js插件导出大数据量时会报网络错误答：你可以分批导出，然后后台合成即可。
    java将数据导出excel计算其文件大小答：2、设置导出excel路径 //导出的文件路径 String filePath="D:\\excel.xls"; 1 2 3、创建excel文件 //创建Excel文件(Workbook) HSSFWorkbook workbook = new HSSFWorkbook(); 1 2 4、设置单元格样式 //设置单元格样式 HSSFCel...POI3.8 导出大数据excel(50万左右)_咖啡加糖_的博客_poi支持最...import or...
    java excel poi 大数据量50W 内存溢出答：1，分页分批从数据库里查询数据。2，注意变量的释放，特别是LIST和MAP之类的引用，如果定义成全局变量或静态变量就会很难释放。3，调大虚拟机内存大小。
    有没有那种做数据自动填报的工具?答：将 SpreadJS 与系统集成，可快速实现各类表单设计、在线填报数据、Excel 导入导出、打印报送、实时预览、数据校验、服务端数据交互等功能，通过对其二次扩展，可以将 SpreadJS 作为数据填报模块直接嵌入到 Web 系统，满足批量导入导出 Excel、大数据量填报、填报暂存、多 sheet 填报、多级上报等多场景业务需求...
    大家正在搜
    js实现数据导出为exceljs表格数据导出exceljs 导出excelhtml导出到exceljs导出excel带样式js导出excel可以编辑保存的js导出excel表格插件jsp导出excelajax导出excel文件
    相关问题
    visual foxpro怎么导出大数据到Excel
    jquery.table2excel.js插件导出大数据量时...
    如何在node导出大数据的excel时分流
    PHPExcel怎么具体实现大数据量的导出
    大数据导出分析，导出什么格式最好？excel才6万多，还是太...
    asp导出Excel大数据量报错的问题！
    mysql 如何把大数据导出为excel
    从foxpro的大数据量（超过12万条）DBF导出到Exce...