zoukankan      html  css  js  c++  java
  • JavaScript 上万条数据 导出Excel文件(改装版)

    最近项目要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>
    ');
          }
        }
        docData.append('<tr>
    ' + 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>
    ');
                    }
                }
            }
            docData.append('<tr>
    ' + 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(/x0dx0a/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;  
      }  
  • 相关阅读:
    GHOST CMS
    某小姑娘治疗案
    关于ssl证书的一些知识
    Hbuiler中常用的快捷键
    跌落损任胸胁案
    老年脑梗案
    Centos7安装完成后设定基本的网络配置
    Centos7下的文件压缩
    在centos7上用docker安装宝塔面板
    右手中指一侧麻木案
  • 原文地址:https://www.cnblogs.com/zhaomeizi/p/8952979.html
Copyright © 2011-2022 走看看