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;  
      }  
  • 相关阅读:
    程序员的7中武器
    需要强化的知识
    微软中国联合小i推出MSN群Beta 不需任何插件
    XML Notepad 2006 v2.0
    Sandcastle August 2006 Community Technology Preview
    [推荐] TechNet 广播 SQL Server 2000完结篇
    《太空帝国 4》(Space Empires IV)以及 xxMod 英文版 中文版 TDM Mod 英文版 中文版
    IronPython 1.0 RC2 更新 1.0.60816
    Microsoft .NET Framework 3.0 RC1
    《Oracle Developer Suite 10g》(Oracle Developer Suite 10g)V10.1.2.0.2
  • 原文地址:https://www.cnblogs.com/zhaomeizi/p/8952979.html
Copyright © 2011-2022 走看看