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

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

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

栗子:
html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js Blod 保存文件</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="tableExport.jquery.plugin.js"></script>
</head>
<body> <div id="app">
<p>===========================================js Blod 保存文件========================================</p>
<input type="button" id="savetext" value="Save" onclick="Save()"/>

<p>====================================tableExport.jquery.plugin.js====================================</br></p>
<input type="button" id="savetext" value="tableSave" onclick="Save1()"/> <table id="tableID">
<thead>
<tr align="left">
<td>编号</td>
<td>名单</td>
<td>组ID</td>
<td>组名</td>
<td>类型</td>
<td>更新时间</td>
<td>更新者</td>
</tr>
</thead>
<tbody>
<tr align="left" >
<td style="vnd.ms-excel.numberformat:@">编号1</td>
<td style="vnd.ms-excel.numberformat:@">白名单1</td>
<td style="vnd.ms-excel.numberformat:@">组ID1</td>
<td style="vnd.ms-excel.numberformat:@">组名1</td>
<td style="vnd.ms-excel.numberformat:@">类型1</td>
<td style="vnd.ms-excel.numberformat:@">更新时间1</td>
<td style="vnd.ms-excel.numberformat:@">更新者1</td>
</tr>
<tr align="left" >
<td style="vnd.ms-excel.numberformat:@">编号2</td>
<td style="vnd.ms-excel.numberformat:@">名单2</td>
<td style="vnd.ms-excel.numberformat:@">组ID2</td>
<td style="vnd.ms-excel.numberformat:@">组名2</td>
<td style="vnd.ms-excel.numberformat:@">类型2</td>
<td style="vnd.ms-excel.numberformat:@">更新时间2</td>
<td style="vnd.ms-excel.numberformat:@">更新者2</td>
</tr>
</tbody>
</table> </div> <script type="text/javascript">
//tableExport.jquery.plugin.js
function Save1(){
$('#tableID').tableExport({type:'excel'});
} //js Blod 保存文件
function doSave(value, type, name) {
var blob;
if (typeof window.Blob == "function") {
blob = new Blob([value], {type: type});
} else {
var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
var bb = new BlobBuilder();
bb.append(value);
blob = bb.getBlob(type);
}
var URL = window.URL || window.webkitURL;
var bloburl = URL.createObjectURL(blob);
var anchor = document.createElement("a");
if ('download' in anchor) {
anchor.style.visibility = "hidden";
anchor.href = bloburl;
anchor.download = name;
document.body.appendChild(anchor);
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
anchor.dispatchEvent(evt);
document.body.removeChild(anchor);
} else if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, name);
} else {
location.href = bloburl;
}
} var a=new Array();
for(var i=0;i<10;i++)
a.push(i); function Save(){
doSave(a, "text/latex", "hello.txt");
}
</script>
</body>
</html>
tableExport.jquery.plugin.js
/*
tableExport.jquery.plugin Copyright (c) 2015 hhurz, c
Original work Copyright (c) 2014 Giri Raj, https://github.com/kayalshri/
Licensed under the MIT License, http://opensource.org/licenses/mit-license
*/ (function ($) {
$.fn.extend({
tableExport: function (options) {
var defaults = {
consoleLog: false,
csvEnclosure: '"',
csvSeparator: ',',
csvUseBOM: true,
displayTableName: false,
escape: false,
excelstyles: ['border-bottom', 'border-top', 'border-left', 'border-right'],
fileName: 'tableExport',
htmlContent: false,
ignoreColumn: [],
ignoreRow:[],
jspdf: {orientation: 'p',
unit: 'pt',
format: 'a4', // jspdf page format or 'bestfit' for autmatic paper format selection
margins: {left: 20, right: 10, top: 10, bottom: 10},
autotable: {styles: {cellPadding: 2,
rowHeight: 12,
fontSize: 8,
fillColor: 255, // color value or 'inherit' to use css background-color from html table
textColor: 50, // color value or 'inherit' to use css color from html table
fontStyle: 'normal', // normal, bold, italic, bolditalic or 'inherit' to use css font-weight and fonst-style from html table
overflow: 'ellipsize', // visible, hidden, ellipsize or linebreak
halign: 'left', // left, center, right
valign: 'middle' // top, middle, bottom
},
headerStyles: {fillColor: [52, 73, 94],
textColor: 255,
fontStyle: 'bold',
halign: 'center'
},
alternateRowStyles: {fillColor: 245
},
tableExport: {onAfterAutotable: null,
onBeforeAutotable: null,
onTable: null
}
}
},
numbers: {html: {decimalMark: '.',
thousandsSeparator: ','
},
output: {decimalMark: '.',
thousandsSeparator: ','
}
},
onCellData: null,
onCellHtmlData: null,
outputMode: 'file', // 'file', 'string' or 'base64'
tbodySelector: 'tr',
theadSelector: 'tr',
tableName: 'myTableName',
type: 'csv', // 'csv', 'txt', 'sql', 'json', 'xml', 'excel', 'doc', 'png' or 'pdf'
worksheetName: 'xlsWorksheetName'
}; var FONT_ROW_RATIO = 1.15;
var el = this;
var DownloadEvt = null;
var $hrows = [];
var $rows = [];
var rowIndex = 0;
var rowspans = [];
var trData = ''; 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("");
} $.extend(true, defaults, options);
debugger if (defaults.type == 'csv' || defaults.type == 'txt') { var csvData = new StringBuffer();
var rowlength = 0;
rowIndex = 0; function CollectCsvData (tgroup, tselector, rowselector, length) { $rows = $(el).find(tgroup).first().find(tselector);
$rows.each(function () {
csvData.append(this.innerHTML);
rowIndex++;
}); return $rows.length;
} rowlength += CollectCsvData ('thead', defaults.theadSelector, 'th,td', rowlength);
rowlength += CollectCsvData ('tbody', defaults.tbodySelector, 'td', rowlength);
CollectCsvData ('tfoot', defaults.tbodySelector, 'td', rowlength); csvData.append("\n"); //output
if (defaults.consoleLog === true)
console.log(csvData); if (defaults.outputMode === 'string')
return csvData; if (defaults.outputMode === 'base64')
return base64encode(csvData); try { var blob = new Blob(csvData.content.slice(0,1200), {type: "text/" + (defaults.type == 'csv' ? 'csv' : 'plain') + ";charset=utf-8"});
saveAs(blob, defaults.fileName + '.' + defaults.type, (defaults.type != 'csv' || defaults.csvUseBOM === false));
}
catch (e) {
downloadFile(defaults.fileName + '.' + defaults.type,
'data:text/' + (defaults.type == 'csv' ? 'csv' : 'plain') + ';charset=utf-8,' + ((defaults.type == 'csv' && defaults.csvUseBOM)? '\ufeff' : ''),
csvData.toString());
} } else if (defaults.type == 'sql') { // Header
rowIndex = 0;
var tdData = "INSERT INTO `" + defaults.tableName + "` (";
$hrows = $(el).find('thead').first().find(defaults.theadSelector);
$hrows.each(function () {
ForEachVisibleCell(this, 'th,td', rowIndex, $hrows.length,
function (cell, row, col) {
tdData += "'" + parseString(cell, row, col) + "',";
});
rowIndex++;
tdData = $.trim(tdData);
tdData = $.trim(tdData).substring(0, tdData.length - 1);
});
tdData += ") VALUES ";
// Row vs Column
$rows = $(el).find('tbody').first().find(defaults.tbodySelector);
$rows.each(function () {
trData = "";
ForEachVisibleCell(this, 'td', rowIndex, $hrows.length + $rows.length,
function (cell, row, col) {
trData += "'" + parseString(cell, row, col) + "',";
});
if (trData.length > 3) {
tdData += "(" + trData;
tdData = $.trim(tdData).substring(0, tdData.length - 1);
tdData += "),";
}
rowIndex++;
}); tdData = $.trim(tdData).substring(0, tdData.length - 1);
tdData += ";"; //output
if (defaults.consoleLog === true)
console.log(tdData); if (defaults.outputMode === 'string')
return tdData; if (defaults.outputMode === 'base64')
return base64encode(tdData); try {
var blob = new Blob([tdData], {type: "text/plain;charset=utf-8"});
saveAs(blob, defaults.fileName + '.sql');
}
catch (e) {
downloadFile(defaults.fileName + '.sql',
'data:application/sql;charset=utf-8,',
tdData);
} } else if (defaults.type == 'json') { var jsonHeaderArray = [];
$hrows = $(el).find('thead').first().find(defaults.theadSelector);
$hrows.each(function () {
var jsonArrayTd = []; ForEachVisibleCell(this, 'th,td', rowIndex, $hrows.length,
function (cell, row, col) {
jsonArrayTd.push(parseString(cell, row, col));
});
jsonHeaderArray.push(jsonArrayTd);
}); var jsonArray = [];
$rows = $(el).find('tbody').first().find(defaults.tbodySelector);
$rows.each(function () {
var jsonArrayTd = []; ForEachVisibleCell(this, 'td', rowIndex, $hrows.length + $rows.length,
function (cell, row, col) {
jsonArrayTd.push(parseString(cell, row, col));
}); if (jsonArrayTd.length > 0 && (jsonArrayTd.length != 1 || jsonArrayTd[0] != ""))
jsonArray.push(jsonArrayTd); rowIndex++;
}); var jsonExportArray = [];
jsonExportArray.push({header: jsonHeaderArray, data: jsonArray}); var sdata = JSON.stringify(jsonExportArray); if (defaults.consoleLog === true)
console.log(sdata); if (defaults.outputMode === 'string')
return sdata; if (defaults.outputMode === 'base64')
return base64encode(sdata); try {
var blob = new Blob([sdata], {type: "application/json;charset=utf-8"});
saveAs(blob, defaults.fileName + '.json');
}
catch (e) {
downloadFile(defaults.fileName + '.json',
'data:application/json;charset=utf-8;base64,',
sdata);
} } else if (defaults.type === 'xml') { rowIndex = 0;
var xml = '<?xml version="1.0" encoding="utf-8"?>';
xml += '<tabledata><fields>'; // Header
$hrows = $(el).find('thead').first().find(defaults.theadSelector);
$hrows.each(function () { ForEachVisibleCell(this, 'th,td', rowIndex, $rows.length,
function (cell, row, col) {
xml += "<field>" + parseString(cell, row, col) + "</field>";
});
rowIndex++;
});
xml += '</fields><data>'; // Row Vs Column
var rowCount = 1;
$rows = $(el).find('tbody').first().find(defaults.tbodySelector);
$rows.each(function () {
var colCount = 1;
trData = "";
ForEachVisibleCell(this, 'td', rowIndex, $hrows.length + $rows.length,
function (cell, row, col) {
trData += "<column-" + colCount + ">" + parseString(cell, row, col) + "</column-" + colCount + ">";
colCount++;
});
if (trData.length > 0 && trData != "<column-1></column-1>") {
xml += '<row id="' + rowCount + '">' + trData + '</row>';
rowCount++;
} rowIndex++;
});
xml += '</data></tabledata>'; //output
if (defaults.consoleLog === true)
console.log(xml); if (defaults.outputMode === 'string')
return xml; if (defaults.outputMode === 'base64')
return base64encode(xml); try {
var blob = new Blob([xml], {type: "application/xml;charset=utf-8"});
saveAs(blob, defaults.fileName + '.xml');
}
catch (e) {
downloadFile(defaults.fileName + '.xml',
'data:application/xml;charset=utf-8;base64,',
xml);
} } else if (defaults.type == 'excel' || defaults.type == 'xls' || defaults.type == 'word' || defaults.type == 'doc') { var MSDocType = (defaults.type == 'excel' || defaults.type == 'xls') ? 'excel' : 'word';
var MSDocExt = (MSDocType == 'excel') ? 'xls' : 'doc';
var MSDocSchema = (MSDocExt == 'xls') ? 'xmlns:x="urn:schemas-microsoft-com:office:excel"' : 'xmlns:w="urn:schemas-microsoft-com:office:word"'; rowIndex = 0;
var docData = new StringBuffer();
docData.append('<table><thead>');
// Header
$hrows = $(el).find('thead').first().find(defaults.theadSelector);
var statrD = (new Date()).getTime();
console.log(statrD); $hrows.each(function () {
docData.append('<tr>' + this.innerHTML + '</tr>');
});
docData.append('</thead><tbody>'); // Row Vs Column
$rows = $(el).find('tbody').first().find(defaults.tbodySelector);
$rows.each(function () {
docData.append('<tr>' + this.innerHTML + '</tr>');
});
console.log("====第二循环:===="+((new Date()).getTime()-statrD));
console.log(docData); if (defaults.displayTableName)
docData.append( '<tr><td></td></tr><tr><td></td></tr><tr><td>' + parseString($('<p>' + defaults.tableName + '</p>')) + '</td></tr>');
docData.append('</tbody></table>');
var docFile = new StringBuffer(); docFile.append('<html xmlns:o="urn:schemas-microsoft-com:office:office" ' + MSDocSchema + ' xmlns="http://www.w3.org/TR/REC-html40">');
docFile.append('<meta http-equiv="content-type" content="application/vnd.ms-' + MSDocType + '; charset=UTF-8">');
docFile.append("<head>");
if (MSDocType === 'excel') {
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(defaults.worksheetName);
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); if (defaults.consoleLog === true)
/*console.log(docFile.toString());*/ if (defaults.outputMode === 'string')
return docFile.toString(); if (defaults.outputMode === 'base64')
return base64encode(docFile.toString()); try {
var blob = new Blob(docFile.content,{type: 'application/vnd.ms-' + defaults.type});
console.log("blob.size==="+blob.size);
saveAs(blob, defaults.fileName + '.' + MSDocExt+"x");
}
catch (e) {
downloadFile(defaults.fileName + '.xlsx' ,
'data:application/vnd.ms-' + MSDocType + ';base64,',
docFile.toString());
} } else if (defaults.type == 'png') {
html2canvas($(el)[0], {
allowTaint: true,
background: '#fff',
onrendered: function (canvas) { var image = canvas.toDataURL();
image = image.substring(22); // remove data stuff var byteString = atob(image);
var buffer = new ArrayBuffer(byteString.length);
var intArray = new Uint8Array(buffer); for (var i = 0; i < byteString.length; i++)
intArray[i] = byteString.charCodeAt(i); if (defaults.consoleLog === true)
console.log(byteString); if (defaults.outputMode === 'string')
return byteString; if (defaults.outputMode === 'base64')
return base64encode(image); try {
var blob = new Blob([buffer], {type: "image/png"});
saveAs(blob, defaults.fileName + '.png');
}
catch (e) {
downloadFile(defaults.fileName + '.png',
'data:image/png;base64,',
image);
}
}
}); } else if (defaults.type == 'pdf') {
if (defaults.jspdf.autotable === false) {
var addHtmlOptions = {
dim: {
w: getPropertyUnitValue($(el).first().get(0), 'width', 'mm'),
h: getPropertyUnitValue($(el).first().get(0), 'height', 'mm')
},
pagesplit: false
}; var doc = new jsPDF(defaults.jspdf.orientation, defaults.jspdf.unit, defaults.jspdf.format);
doc.addHTML($(el).first(),
defaults.jspdf.margins.left,
defaults.jspdf.margins.top,
addHtmlOptions,
function () {
jsPdfOutput(doc);
});
//delete doc;
}
else {
// pdf output using jsPDF AutoTable plugin
// https://github.com/simonbengtsson/jsPDF-AutoTable var teOptions = defaults.jspdf.autotable.tableExport; // When setting jspdf.format to 'bestfit' tableExport tries to choose
// the minimum required paper format and orientation in which the table
// (or tables in multitable mode) completely fits without column adjustment
if (typeof defaults.jspdf.format === 'string' && defaults.jspdf.format.toLowerCase() === 'bestfit') {
var pageFormats = {
'a0': [2383.94, 3370.39], 'a1': [1683.78, 2383.94],
'a2': [1190.55, 1683.78], 'a3': [841.89, 1190.55],
'a4': [595.28, 841.89]
};
var rk = '', ro = '';
var mw = 0; $(el).filter(':visible').each(function () {
if ($(this).css('display') != 'none') {
var w = getPropertyUnitValue($(this).get(0), 'width', 'pt'); if (w > mw) {
if (w > pageFormats['a0'][0]) {
rk = 'a0';
ro = 'l';
}
for (var key in pageFormats) {
if (pageFormats.hasOwnProperty(key)) {
if (pageFormats[key][1] > w) {
rk = key;
ro = 'l';
if (pageFormats[key][0] > w)
ro = 'p';
}
}
}
mw = w;
}
}
});
defaults.jspdf.format = (rk == '' ? 'a4' : rk);
defaults.jspdf.orientation = (ro == '' ? 'w' : ro);
} // The jsPDF doc object is stored in defaults.jspdf.autotable.tableExport,
// thus it can be accessed from any callback function
teOptions.doc = new jsPDF(defaults.jspdf.orientation,
defaults.jspdf.unit,
defaults.jspdf.format); $(el).filter(function() {
return $(this).data("tableexport-display") != 'none' &&
($(this).is(':visible') ||
$(this).data("tableexport-display") == 'always');
}).each(function () {
var colKey;
var rowIndex = 0; teOptions.columns = [];
teOptions.rows = [];
teOptions.rowoptions = {}; // onTable: optional callback function for every matching table that can be used
// to modify the tableExport options or to skip the output of a particular table
// if the table selector targets multiple tables
if (typeof teOptions.onTable === 'function')
if (teOptions.onTable($(this), defaults) === false)
return true; // continue to next iteration step (table) // each table works with an own copy of AutoTable options
defaults.jspdf.autotable.tableExport = null; // avoid deep recursion error
var atOptions = $.extend(true, {}, defaults.jspdf.autotable);
defaults.jspdf.autotable.tableExport = teOptions; atOptions.margin = {};
$.extend(true, atOptions.margin, defaults.jspdf.margins);
atOptions.tableExport = teOptions; // Fix jsPDF Autotable's row height calculation
if (typeof atOptions.beforePageContent !== 'function') {
atOptions.beforePageContent = function (data) {
if (data.pageCount == 1) {
var all = data.table.rows.concat(data.table.headerRow);
all.forEach(function (row) {
if ( row.height > 0 ) {
row.height += (2 - FONT_ROW_RATIO) / 2 * row.styles.fontSize;
data.table.height += (2 - FONT_ROW_RATIO) / 2 * row.styles.fontSize;
}
});
}
}
} if (typeof atOptions.createdHeaderCell !== 'function') {
// apply some original css styles to pdf header cells
atOptions.createdHeaderCell = function (cell, data) { if (typeof teOptions.columns [data.column.dataKey] != 'undefined') {
var col = teOptions.columns [data.column.dataKey];
cell.styles.halign = col.style.align;
if (atOptions.styles.fillColor === 'inherit')
cell.styles.fillColor = col.style.bcolor;
if (atOptions.styles.textColor === 'inherit')
cell.styles.textColor = col.style.color;
if (atOptions.styles.fontStyle === 'inherit')
cell.styles.fontStyle = col.style.fstyle;
}
}
} if (typeof atOptions.createdCell !== 'function') {
// apply some original css styles to pdf table cells
atOptions.createdCell = function (cell, data) {
var rowopt = teOptions.rowoptions [data.row.index + ":" + data.column.dataKey]; if ( typeof rowopt != 'undefined' && typeof rowopt.style != 'undefined' ) {
cell.styles.halign = rowopt.style.align;
if (atOptions.styles.fillColor === 'inherit')
cell.styles.fillColor = rowopt.style.bcolor;
if (atOptions.styles.textColor === 'inherit')
cell.styles.textColor = rowopt.style.color;
if (atOptions.styles.fontStyle === 'inherit')
cell.styles.fontStyle = rowopt.style.fstyle;
}
}
} if (typeof atOptions.drawHeaderCell !== 'function') {
atOptions.drawHeaderCell = function (cell, data) {
var colopt = teOptions.columns [data.column.dataKey]; if (colopt.style.hasOwnProperty("hidden") != true || colopt.style.hidden !== true)
return prepareAutoTableText (cell, data, colopt);
else
return false; // cell is hidden
}
} if (typeof atOptions.drawCell !== 'function') {
atOptions.drawCell = function (cell, data) {
var rowopt = teOptions.rowoptions [data.row.index + ":" + data.column.dataKey];
return prepareAutoTableText (cell, data, rowopt);
}
} // collect header and data rows
$hrows = $(this).find('thead').find(defaults.theadSelector);
$hrows.each(function () {
colKey = 0; ForEachVisibleCell(this, 'th,td', rowIndex, $hrows.length,
function (cell, row, col) {
var obj = getCellStyles (cell);
obj.title = parseString(cell, row, col);
obj.key = colKey++;
teOptions.columns.push(obj);
});
rowIndex++;
}); var rowCount = 0;
$rows = $(this).find('tbody').find(defaults.tbodySelector);
$rows.each(function () {
var rowData = [];
colKey = 0; ForEachVisibleCell(this, 'td', rowIndex, $hrows.length + $rows.length,
function (cell, row, col) {
if (typeof teOptions.columns[colKey] === 'undefined') {
// jsPDF-Autotable needs columns. Thus define hidden ones for tables without thead
var obj = {
title: '',
key: colKey,
style: {
hidden: true
}
};
teOptions.columns.push(obj);
}
if (cell !== null) {
teOptions.rowoptions [rowCount + ":" + colKey++] = getCellStyles (cell);
}
else {
var obj = $.extend(true, {}, teOptions.rowoptions [rowCount + ":" + (colKey-1)]);
obj.colspan = -1;
teOptions.rowoptions [rowCount + ":" + colKey++] = obj;
} rowData.push(parseString(cell, row, col));
});
if (rowData.length) {
teOptions.rows.push(rowData);
rowCount++
}
rowIndex++;
}); // onBeforeAutotable: optional callback function before calling
// jsPDF AutoTable that can be used to modify the AutoTable options
if (typeof teOptions.onBeforeAutotable === 'function')
teOptions.onBeforeAutotable($(this), teOptions.columns, teOptions.rows, atOptions); teOptions.doc.autoTable(teOptions.columns, teOptions.rows, atOptions); // onAfterAutotable: optional callback function after returning
// from jsPDF AutoTable that can be used to modify the AutoTable options
if (typeof teOptions.onAfterAutotable === 'function')
teOptions.onAfterAutotable($(this), atOptions); // set the start position for the next table (in case there is one)
defaults.jspdf.autotable.startY = teOptions.doc.autoTableEndPosY() + atOptions.margin.top;
}); jsPdfOutput(teOptions.doc); teOptions.columns.length = 0;
teOptions.rows.length = 0;
delete teOptions.doc;
teOptions.doc = null;
}
} function ForEachVisibleCell(tableRow, selector, rowIndex, rowCount, cellcallback) { /*console.log(JSON.stringify(tableRow.innerHTML));*/
if ($.inArray(rowIndex, defaults.ignoreRow) == -1 &&
$.inArray(rowIndex-rowCount, defaults.ignoreRow) == -1) { var $row = $(tableRow).filter(function() {
return $(this).data("tableexport-display") != 'none' &&
($(this).is(':visible') ||
$(this).data("tableexport-display") == 'always' ||
$(this).closest('table').data("tableexport-display") == 'always');
}).find(selector); var rowColspan = 0; $row.each(function (colIndex) {
if ($(this).data("tableexport-display") == 'always' ||
($(this).css('display') != 'none' &&
$(this).css('visibility') != 'hidden' &&
$(this).data("tableexport-display") != 'none')) {
if ($.inArray(colIndex, defaults.ignoreColumn) == -1 &&
$.inArray(colIndex-$row.length, defaults.ignoreColumn) == -1) {
if (typeof (cellcallback) === "function") {
var c, Colspan = 0;
var r, Rowspan = 0; // handle rowspans from previous rows
if (typeof rowspans[rowIndex] != 'undefined' && rowspans[rowIndex].length > 0) {
for (c = 0; c <= colIndex; c++) {
if (typeof rowspans[rowIndex][c] != 'undefined') {
cellcallback(null, rowIndex, c);
delete rowspans[rowIndex][c];
colIndex++;
}
}
} if ($(this).is("[colspan]")) {
Colspan = parseInt($(this).attr('colspan'));
rowColspan += Colspan > 0 ? Colspan - 1 : 0;
} if ($(this).is("[rowspan]"))
Rowspan = parseInt($(this).attr('rowspan')); // output content of current cell
cellcallback(this, rowIndex, colIndex); // handle colspan of current cell
for (c = 0; c < Colspan - 1; c++)
cellcallback(null, rowIndex, colIndex + c); // store rowspan for following rows
if (Rowspan) {
for (r = 1; r < Rowspan; r++) {
if (typeof rowspans[rowIndex + r] == 'undefined')
rowspans[rowIndex + r] = []; rowspans[rowIndex + r][colIndex + rowColspan] = ""; for (c = 1; c < Colspan; c++)
rowspans[rowIndex + r][colIndex + rowColspan - c] = "";
}
}
}
}
}
});
}
} function jsPdfOutput(doc) {
if (defaults.consoleLog === true)
console.log(doc.output()); if (defaults.outputMode === 'string')
return doc.output(); if (defaults.outputMode === 'base64')
return base64encode(doc.output()); try {
var blob = doc.output('blob');
saveAs(blob, defaults.fileName + '.pdf');
}
catch (e) {
downloadFile(defaults.fileName + '.pdf',
'data:application/pdf;base64,',
doc.output());
}
} function prepareAutoTableText (cell, data, cellopt) {
var cs = 0;
if ( typeof cellopt != 'undefined' )
cs = cellopt.colspan; if ( cs >= 0 ) {
// colspan handling
var cellWidth = cell.width;
var textPosX = cell.textPos.x;
var i = data.table.columns.indexOf(data.column); for (var c = 1; c < cs; c++) {
var column = data.table.columns[i+c];
cellWidth += column.width;
} if ( cs > 1 ) {
if ( cell.styles.halign === 'right' )
textPosX = cell.textPos.x + cellWidth - cell.width;
else if ( cell.styles.halign === 'center' )
textPosX = cell.textPos.x + (cellWidth - cell.width) / 2;
} cell.width = cellWidth;
cell.textPos.x = textPosX; if ( typeof cellopt != 'undefined' && cellopt.rowspan > 1 )
{
if ( cell.styles.valign === 'middle' )
cell.textPos.y = cell.textPos.y + (cell.height * (cellopt.rowspan - 1)) / 2;
else if ( cell.styles.valign === 'bottom' )
cell.textPos.y += (cellopt.rowspan - 1) * cell.height; cell.height = cell.height * cellopt.rowspan;
} // fix jsPDF's calculation of text position
if ( cell.styles.valign === 'middle' || cell.styles.valign === 'bottom' ) {
var splittedText = typeof cell.text === 'string' ? cell.text.split(/\r\n|\r|\n/g) : cell.text;
var lineCount = splittedText.length || 1;
if (lineCount > 2)
cell.textPos.y -= ((2 - FONT_ROW_RATIO) / 2 * data.row.styles.fontSize) * (lineCount-2) / 3 ;
}
return true;
}
else
return false; // cell is hidden (colspan = -1), don't draw it
} function escapeRegExp(string) {
return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
} function replaceAll(string, find, replace) {
return string.replace(new RegExp(escapeRegExp(find), 'g'), replace);
} // Takes a string and encapsulates it (by default in double-quotes) if it
// contains the csv field separator, spaces, or linebreaks.
function csvString(cell, rowIndex, colIndex) {
var result = ''; if (cell != null) {
var dataString = parseString(cell, rowIndex, colIndex); var csvValue = (dataString === null || dataString == '') ? '' : dataString.toString(); if (dataString instanceof Date)
result = defaults.csvEnclosure + dataString.toLocaleString() + defaults.csvEnclosure;
else {
result = replaceAll(csvValue, defaults.csvEnclosure, defaults.csvEnclosure + defaults.csvEnclosure); if (result.indexOf(defaults.csvSeparator) >= 0 || /[\r\n ]/g.test(result))
result = defaults.csvEnclosure + result + defaults.csvEnclosure;
}
} return result;
} function parseNumber(value) {
value = value || "0";
value = replaceAll(value, defaults.numbers.html.decimalMark, '.');
value = replaceAll(value, defaults.numbers.html.thousandsSeparator, ''); return typeof value === "number" || jQuery.isNumeric(value) !== false ? value : false;
} function parseString(cell, rowIndex, colIndex) {
var result = ''; if (cell != null) {
var $cell = $(cell);
var htmlData = $cell.html(); if (typeof defaults.onCellHtmlData === 'function')
htmlData = defaults.onCellHtmlData($cell, rowIndex, colIndex, htmlData); if (defaults.htmlContent === true) {
result = $.trim(htmlData);
}
else {
var text = htmlData.replace(/\n/g,'\u2028').replace(/<br\s*[\/]?>/gi, '\u2060');
var obj = $('<div/>').html(text).contents();
text = '';
$.each(obj.text().split("\u2028"), function(i, v) {
if (i > 0)
text += " ";
text += $.trim(v);
}); $.each(text.split("\u2060"), function(i, v) {
if (i > 0)
result += "\n";
result += $.trim(v).replace(/\u00AD/g, ""); // remove soft hyphens
}); if (defaults.numbers.html.decimalMark != defaults.numbers.output.decimalMark ||
defaults.numbers.html.thousandsSeparator != defaults.numbers.output.thousandsSeparator) {
var number = parseNumber (result); if ( number !== false ) {
var frac = ("" + number).split('.');
if ( frac.length == 1 )
frac[1] = "";
var mod = frac[0].length > 3 ? frac[0].length % 3 : 0; result = (number < 0 ? "-" : "") +
(defaults.numbers.output.thousandsSeparator ? ((mod ? frac[0].substr(0, mod) + defaults.numbers.output.thousandsSeparator : "") + frac[0].substr(mod).replace(/(\d{3})(?=\d)/g, "$1" + defaults.numbers.output.thousandsSeparator)) : frac[0]) +
(frac[1].length ? defaults.numbers.output.decimalMark + frac[1] : "");
}
}
} if (defaults.escape === true) {
result = escape(result);
} if (typeof defaults.onCellData === 'function') {
result = defaults.onCellData($cell, rowIndex, colIndex, result);
}
} return result;
} function hyphenate(a, b, c) {
return b + "-" + c.toLowerCase();
} function rgb2array(rgb_string, default_result) {
var re = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
var bits = re.exec(rgb_string);
var result = default_result;
if (bits)
result = [ parseInt(bits[1]), parseInt(bits[2]), parseInt(bits[3]) ];
return result;
} function getCellStyles (cell) {
var a = getStyle(cell, 'text-align');
var fw = getStyle(cell, 'font-weight');
var fs = getStyle(cell, 'font-style');
var f = '';
if (a == 'start')
a = getStyle(cell, 'direction') == 'rtl' ? 'right' : 'left';
if (fw >= 700)
f = 'bold';
if (fs == 'italic')
f += fs;
if (f == '')
f = 'normal';
return {
style: {
align: a,
bcolor: rgb2array(getStyle(cell, 'background-color'), [255, 255, 255]),
color: rgb2array(getStyle(cell, 'color'), [0, 0, 0]),
fstyle: f
},
colspan: (parseInt($(cell).attr('colspan')) || 0),
rowspan: (parseInt($(cell).attr('rowspan')) || 0)
};
} // get computed style property
function getStyle(target, prop) {
try {
if (window.getComputedStyle) { // gecko and webkit
prop = prop.replace(/([a-z])([A-Z])/, hyphenate); // requires hyphenated, not camel
return window.getComputedStyle(target, null).getPropertyValue(prop);
}
if (target.currentStyle) { // ie
return target.currentStyle[prop];
}
return target.style[prop];
}
catch (e) {
}
return "";
} function getPropertyUnitValue(target, prop, unit) {
var baseline = 100; // any number serves var value = getStyle(target, prop); // get the computed style value var numeric = value.match(/\d+/); // get the numeric component
if (numeric !== null) {
numeric = numeric[0]; // get the string var temp = document.createElement("div"); // create temporary element
temp.style.overflow = "hidden"; // in case baseline is set too low
temp.style.visibility = "hidden"; // no need to show it target.parentElement.appendChild(temp); // insert it into the parent for em, ex and % temp.style.width = baseline + unit;
var factor = baseline / temp.offsetWidth; target.parentElement.removeChild(temp); // clean up return (numeric * factor);
}
return 0;
} 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 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;
}
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; 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 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;
} return this;
}
});
})(jQuery);

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文件

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

  5. 将页面中表格数据导出excel格式的文件(vue)

    近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...

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

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

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

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

  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. Python黑帽编程2.7 异常处理

    Python黑帽编程2.7 异常处理 异常是个很宽泛的概念,如果程序没有按预想的执行,都可以说是异常了.遇到一些特殊情况没处理会引发异常,比如读文件的时候文件不存在,网络连接超时.程序本身的错误也可以 ...

  2. 类:String,Math,DateTime,Random

    string类: 判断邮箱格式是否正确: 1.有且只能有一个@  2.不能以@开头  3.@之后至少有一个.  4.@和.不能靠在一起  5.不能以.结尾 math 类: math.ceiling() ...

  3. Apache 日志管理,获取客户端端口号

    日志管理分类 日志文件是用户管理和监控 Apache 安全的非常好的第一手资料,它清晰地记录了客户端访问 Apache 服务器资源的每一条记录,以及在访问中出现的错误信息,可以这样说,Apache 可 ...

  4. 对Java垃圾回收最大的误解是什么

    当 我还是小孩的时候,父母常说如果你不好好学习,就只能去扫大街了.但他们不知道的是,清理垃圾实际上是很棒的一件事.可能这也是即使在Java的世界中, 同样有很多开发者对GC算法产生误解的原因--包括它 ...

  5. C/C++学习----使用C语言代替cmd命令、cmd命令大全

    [开发环境] 物理机版本:Win 7 旗舰版(64位) IDE版本:Visual Studio 2013简体中文旗舰版(cn_visual_studio_ultimate_2013_with_upda ...

  6. winform项目导入数据

    一.点击导入按钮,弹出文件选择框 这个方法的使用要引用下面两个命名空间: using System.Windows.Forms;using DevExpress.XtraEditors; privat ...

  7. Python:zip 函数的用法

    zip() 接受一系列可迭代的对象作为参数,将对象中对应的元素打包成一个个 tuple,然后返回由这些 tuple 组成的 list. 若传入参数的长度不等,则返回 list 的长度和参数中长度最短的 ...

  8. Java并发编程的艺术读后总结

    2019.04.26 - 2019.04.28扫了一遍 Chapter volatile synchronized实现原理 Java内存模型 happen-before 重排序 顺序一致性 JMM 线 ...

  9. Python的类的下划线命名的区别

    首先,单下划线开头,这个常被用于模块中,在一个模块中以单下划线开头的变量和函数被默认当做内部函数,如果使用from  module  import  *导入时,这部分变量和函数不会被导入.注意,如果使 ...

  10. Centos7下Rinetd安装与应用(转)

    Linux下做地址NAT有很多种方法.比如haproxy.nginx的4层代理,linux自带的iptables等都能实现.haproxy.nginx就不说了,配置相对简单:iptables配置复杂, ...