最近项目要js实现将数据导出excel文件，网上很多插件实现~~那个开心呀，谁知道后面数据量达到上万条时出问题：浏览器不仅卡死，导出的excel文件一直提示网络失败。。。。

debug调试发现var excel拼接的table字符串，超出了var的长度限制；幸好网上有前辈的解决方案~~~膜拜ing

参考网址：https://blog.csdn.net/b7410852963/article/details/51197552

需要自己去理解下 JavaScript Blob对象

/***导出excel文件

//例子:

var data = [{ userName: 'lily', age: 28, job: "teacher", city: "广州" },{ userName: 'lucy', age: 19, job: "doctor", city: "深圳" }];

if (data == '')return;

var title = [{ userName: '姓名' }, { job: '工作' }, { age: '年龄' }, { city: '城市' }];

toExcel("dataExport", data, title);

***/

/***toExcel:

 * FileName文件名

 * JSONData导出的数据

 * ShowLabel表头

 */

var DownloadEvt = null;

function toExcel(FileName, JSONData, ShowLabel) {

    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

    var docData = new StringBuffer();

    // Header

    var innerHTML = new StringBuffer();

    docData.append('<table><thead>');

    for (var i = 0; i < ShowLabel.length; i++) {

      for (var key in ShowLabel[i]) {

        innerHTML.append('<td>' + ShowLabel[i][key] + '</td>\r');

      }

    }

    docData.append('<tr>\r' + innerHTML.toString() + '</tr>');

    docData.append('</thead><tbody>');

    // Row Vs Column

    for (var i = 0; i < arrData.length; i++) {

      var tdRow = new StringBuffer();

        for (var y = 0; y < ShowLabel.length; y++) {

            for (var k in ShowLabel[y]) {

                if (ShowLabel[y].hasOwnProperty(k)) {

                  tdRow.append('<td style="vnd.ms-excel.numberformat:@">' + (arrData[i][k] === null ? '' : arrData[i][k]) + '</td>\r');

                }

            }

        }

        docData.append('<tr>\r' + tdRow.toString() + '</tr>');

    }

    docData.append('</tbody></table>');

    console.log("docData:",docData);

    var docFile = new StringBuffer();

    docFile.append('<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">');

    docFile.append('<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">');

    docFile.append("<head>");

    docFile.append("<!--[if gte mso 9]>");

    docFile.append("<xml>");

    docFile.append("<x:ExcelWorkbook>");

    docFile.append("<x:ExcelWorksheets>");

    docFile.append("<x:ExcelWorksheet>");

    docFile.append("<x:Name>");

    docFile.append("{worksheet}");

    docFile.append("</x:Name>");

    docFile.append("<x:WorksheetOptions>");

    docFile.append("<x:DisplayGridlines/>");

    docFile.append("</x:WorksheetOptions>");

    docFile.append("</x:ExcelWorksheet>");

    docFile.append("</x:ExcelWorksheets>");

    docFile.append("</x:ExcelWorkbook>");

    docFile.append("</xml>");

    docFile.append("<![endif]-->");

    docFile.append("</head>");

    docFile.append("<body>");

    for (var i = 0; i < docData.content.length; i++) {

        docFile.append(docData.content[i].toString());

    }

    // docFile.append( docData.toString());

    docFile.append("</body>");

    docFile.append("</html>");

    console.log('docFile:',docFile);

    try {

      console.log('111111111')

        var blob = new Blob(docFile.content, {

            type: 'application/vnd.ms-excel;charset=UTF-8;'

        });

        console.log("blob.size===" + blob.size);

        saveAs(blob, FileName + '.xlsx');

    } catch (e) {

      console.log('22222222222')

        downloadFile(FileName + '.xlsx',

            'data:application/vnd.ms-excel;base64,',

            docFile.toString());

    }

}

function StringBuffer() {

    this.content = new Array;

  }

  StringBuffer.prototype.append = function(str) {

    this.content.push(str);

  }

  StringBuffer.prototype.prepend = function(str) {

    this.content.unshift(str);

  }

  StringBuffer.prototype.toString = function() {

    return this.content.join("");

  }  

function saveAs(blob, filename) {

    var type = blob.type;

    var force_saveable_type = 'application/octet-stream';

    if (type && type != force_saveable_type) { // 强制下载，而非在浏览器中打开

        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;

        blob = slice.call(blob, 0, blob.size, force_saveable_type);

    }

    var url = URL.createObjectURL(blob);

    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

    save_link.href = url;

    save_link.download = filename;

    console.log('save_link:',save_link);

    var event = document.createEvent('MouseEvents');

    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

    save_link.dispatchEvent(event);

    URL.revokeObjectURL(url);

}

function downloadFile(filename, header, data) {  

    var ua = window.navigator.userAgent;

    if (ua.indexOf("MSIE ") > 0 || !!ua.match(/Trident.*rv\:11\./)) {

      // Internet Explorer (<= 9) workaround by Darryl (https://github.com/dawiong/tableExport.jquery.plugin)

      // based on sampopes answer on http://stackoverflow.com/questions/22317951

      // ! Not working for json and pdf format !

      var frame = document.createElement("iframe");  

      if (frame) {

        document.body.appendChild(frame);

        frame.setAttribute("style", "display:none");

        frame.contentDocument.open("txt/html", "replace");

        frame.contentDocument.write(data);

        frame.contentDocument.close();

        frame.focus();  

        frame.contentDocument.execCommand("SaveAs", true, filename);

        document.body.removeChild(frame);

      }

    }

    else {

      var DownloadLink = document.createElement('a');  

      if (DownloadLink) {

        DownloadLink.style.display = 'none';

        DownloadLink.download = filename;  

        console.log((header + base64encode(data)).length);  

        if (header.toLowerCase().indexOf("base64,") >= 0)

          DownloadLink.href = header + base64encode(data);  

        else

          DownloadLink.href = encodeURIComponent(header + data);  

        document.body.appendChild(DownloadLink);  

        if (document.createEvent) {

          if (DownloadEvt == null)

            DownloadEvt = document.createEvent('MouseEvents');  

          DownloadEvt.initEvent('click', true, false);

          DownloadLink.dispatchEvent(DownloadEvt);

        }

        else if (document.createEventObject)

          DownloadLink.fireEvent('onclick');

        else if (typeof DownloadLink.onclick == 'function')  

          DownloadLink.onclick();  

        /*document.body.removeChild(DownloadLink);*/

      }

    }

  }

  function base64encode(input) {

    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

    var output = "";

    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;

    var i = 0;

    input = utf8Encode(input);

    while (i < input.length) {

      chr1 = input.charCodeAt(i++);

      chr2 = input.charCodeAt(i++);

      chr3 = input.charCodeAt(i++);

      enc1 = chr1 >> 2;

      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);

      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);

      enc4 = chr3 & 63;

      if (isNaN(chr2)) {

        enc3 = enc4 = 64;

      } else if (isNaN(chr3)) {

        enc4 = 64;

      }

      output = output +

              keyStr.charAt(enc1) + keyStr.charAt(enc2) +

              keyStr.charAt(enc3) + keyStr.charAt(enc4);

    }

    return output;

  }  

  function utf8Encode(string) {

    string = string.replace(/\x0d\x0a/g, "\x0a");

    var utftext = "";

    for (var n = 0; n < string.length; n++) {

      var c = string.charCodeAt(n);

      if (c < 128) {

        utftext += String.fromCharCode(c);

      }

      else if ((c > 127) && (c < 2048)) {

        utftext += String.fromCharCode((c >> 6) | 192);

        utftext += String.fromCharCode((c & 63) | 128);

      }

      else {

        utftext += String.fromCharCode((c >> 12) | 224);

        utftext += String.fromCharCode(((c >> 6) & 63) | 128);

        utftext += String.fromCharCode((c & 63) | 128);

      }

    }

    return utftext;

  }

JavaScript 上万条数据 导出Excel文件（改装版）的更多相关文章

  1. JavaScript 上万条数据 导出Excel文件 页面卡死

    最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var  ...

  2. 彻底理解使用JavaScript 将Json数据导出CSV文件

    前言 将数据报表导出,是web数据报告展示常用的附带功能.通常这种功能都是用后端开发人员编写的.今天我们主要讲的是直接通过前端js将数据导出Excel的CSV格式的文件. 原理 首先在本地用Excel ...

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

    一  安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...

  4. 前端 vue表格数据导出Excel 文件实现

    实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...

  5. 使用vue导出excel文件

    今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...

  6. 如何使用JavaScript实现纯前端读取和导出excel文件

    js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...

  7. 如何使用JavaScript导入和导出Excel文件

    本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript是一个涵盖多种框架.直译式.可以轻松自定义客户端的脚本 ...

  8. 如何使用JavaScript实现纯前端读取和导出excel文件（转）

    转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...

  9. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

随机推荐

  1. bean的实例化有几种实现方式

    三种实例化bean的方式   在spring中有三中实例化bean的方式: 一.使用构造器实例化:(90%通常使用的一个方法) 二.使用静态工厂方法实例化: 三.使用实例化工厂方法实例化. 每种实例化 ...

  2. Windows android appium python3 环境搭建

    安装nodejs https://www.cnblogs.com/sea-stream/p/10520624.html java 环境变量配置: https://www.cnblogs.com/sea ...

  3. Java 多条件复杂排序小结

    前言 今天下午做了拼多多在牛客网上的在线笔试题,感觉自己的智商被鄙视到了···不过其中一道题的某一部分引起了我极大的兴趣,感觉可以总结一下,做好积累~ 题目的部分我拍照如下所示 这里面最复杂的就是第3 ...

  4. windows版 Java调用人脸识别离线sdk

    最近因工作需求在java-web服务中调用人脸识别离线sdk,主要通过JNA及JNI技术,但均未调试通过,JNA调用时出现以下异常,一直未解决,求大佬指点,导常信息如下: in BaiduFaceAp ...

  5. 认识flask框架

    1.框架的基本认识: 特点:用Python语言实现的轻量.简洁.扩展性强. 核心:werkzeug和Jinja2 2.虚拟环境: 创建:mkvirtualenv -p python3 名称 进入:wo ...

  6. 浅谈Java简单实现的生产者与消费者问题

    一.面对生产者和消费者的问题,首先我们得明白几点: 生产者:生产数据:消费者:消费数据.消费者在没有数据可供消费的情况下,不能消费:生产者在原数据没有被消费掉的情况下,不能生产新数据.假设,数据空间只 ...

  7. Codeforces 797A - k-Factorization

    A. k-Factorization 题目链接:http://codeforces.com/problemset/problem/797/A time limit per test 2 seconds ...

  8. php后台操作以及一些减缓服务器压力的问题

    上次提到一个微信投票系统,做了一个微信重定向解决了,一个授权复用的问题,昨天投票系统正式投入使用:测试的时候没有问题,上线后出现了一点小问题, 一:php页面参数接受和php中 switch 那个先执 ...

  9. sublime编辑器

    1.完全卸载sublime的方法. 打开preferences->browse packages 这个包,打开的那个目录,然后删除完整的sublime Text3目录就行. 2.sublime的 ...

  10. GrindEQ Math Utilities 2015破解版 图文安装和序列号补丁激活教程

    GrindEQ Math Utilities 2015破解版 图文安装和序列号补丁激活教程 https://www.sdbeta.com/mf/2018/1002/226048.html 软件下载: ...