细说JavaScript 导出 上万条Excel数据
首先这是个鸡肋的方法 合理的做法是 后端直接生成 前端给个链接就行了
（先说原因与过程最后上代码）
1. 先说说为什么会出现这个需求吧。
： 在写运维网站时 自己粗略的看了一下bootstarp-table 就是 基于bootstarp的一个table框架 发现其扩展插件有个导出的功能 Excel 于是乎，就和老板夸下海口 说什么分页的 导出的就在前端做吧 于是。。。呵呵，起初在测试服时由于数据量小 导出就没有多大问题，但是当数据量大（大于300条）的情况下 发现 网页直接就卡死了现象 ，一下就蒙圈了 ，然后自己就看源码
2,在说说我的分析过程
加快速度：
整理插件 第一发现 在导出Excel 的时候 每个table 的cell 的进行的遍历 过滤操作， 发现延时比较长 同时他也将 每个tr 的样式 弄了下拉导致数据过大于是 直接获取 修改，成 innerHtml 速度直线上升 （将非必要数据删除）， 拼接的html 全部转换未 StringBuffer 解决 var 对象不够长度的问题
导出长度问题 ：
首先我们必须了解 JavaScript Blob 对象
一个
Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。具体信息去百度一下
了解 用JavaScript读取和保存文件
3代码
/*
tableExport.jquery.plugin Copyright (c) 2015 hhurz, https://github.com/hhurz/tableExport.jquery.plugin 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); 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)); 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>"); 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); 文章来源，参考：雪维菜编程 http://xuevi.com
细说JavaScript 导出 上万条Excel数据的更多相关文章
- 用Python3生成30万条excel数据（xlsx格式）
在B/S架构的系统测试中,有时需要通过导入excel文件来生成一些数据记录,当数据量小的时候,一般不会出现什么问题,而当导入的数据量巨大时,对系统的性能就是一个考验了.为了验证系统的性能,有时需要导入 ...
- java导出和读取excel数据
使用的是poi的jar包 下载地址http://poi.apache.org/download.html 主要是把jar包导入,直接新建一个列子测试一下就明白了.使用起来还是比较方便的,代码里面的原理 ...
- php插入上万条mysql数据最快的方法
1.使用thinkphp框架 先生成包含所有数据的数组,再使用 addAll() 方法,插入1万条数据仅需3秒钟. 2.PHP原始方法: 将SQL语句进行拼接,使用 insert into table ...
- vue中的iviewUI导出1W条列表数据每次只导出2000条的逻辑
导出弹窗的html <template> <Modal v-model="exportModal" width=400 :closable="false ...
- oracle导出一条二进制数据（二进制,long只能通过dmp导出）
exp jxfoc/JXFOC@ORCL file=d:\dd.dmp tables=(jxfoc.FLIGHT_PLAN_MAKE_LOG,jxfoc.METAR_CONTENT_FOR_MAIL) ...
- 循序渐进开发WinForm项目（5)--Excel数据的导入导出操作
随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到C#开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了. 其实也许我 ...
- JavaScript 上万条数据 导出Excel文件（改装版）
最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ...
- JavaScript 上万条数据 导出Excel文件 页面卡死
最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ...
- 问问题_Java一次导出百万条数据生成excel（web操作）
需求:在web页面操作,一次导出百万条数据并生成excel 分析: 1.异步生成Excel,非实时,完成后使用某种方式通知用户 2.生成多个excel文件,并打包成zip文件,因为一个excel容纳不 ...
随机推荐
- 面试官：你精通多少种语言的 Hello World?
Hello World,是程序员入门编程语言的第一课.不论是C.C++还是Java ,我们写的第一个程序就是它了,还记得小编在大一C语言课上,花了一整节课时间才把它打印到控制台上.万事开头难啊,相信看 ...
- Double值保留两位小数的四种方法
public class DoubleTest { //保留两位小数第三位如果大于4会进一位(四舍五入) double f = 6.23556; /** *使用精确小数BigDecimal */ pu ...
- 最简单的jQuery轮播图（原理解析）
html: <div class="middle_right"> <div id="lunbobox"> <div id=&quo ...
- RocketMQ入门到入土（二）事务消息&顺序消息
接上一篇:RocketMQ入门到入土(一)新手也能看懂的原理和实战! 一.事务消息的由来 1.案例 引用官方的购物案例: 小明购买一个100元的东西,账户扣款100元的同时需要保证在下游的积分系统给小 ...
- Java基础Day07（Map Calender Date 包装类 System类 异常）
1.Map Map是集合容器,存放的元素有键与值两部分组成,通过键可以找到所对应的值,键和值必须是引用数据类型,键是唯一的,不能重复,没有顺序. HashMap是Map的实现类. Map的添加,删除, ...
- 学习前端的时候，突然想起了Sharepoint母版页里的占位符，算知识的融会不？
今天看到这个段话,我就想起来当时学习Sharepoint的时候,总是搞不明白我们老师讲的那个母版页里的占位符到底是干啥的.现在看到了类似的东西,让我想起来了之前一直搞不懂的东西,很感慨. (完)
- Java1.8的HashMap源码解析
java1.8是现在用的最多的版本,hashmap是现在用的最多的map,今天我们试图分析一下源码. 数据结构 首先我们注意到数据是存放在一个Node数组里面 transient Node<K, ...
- 浏览器缓存_HTTP强缓存和协商缓存
浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档. 所以根据上面的特点,浏览器缓存有下面的优点: 减少冗余的数据传 ...
- sql语句-根据动态参数去拼sql
1.查询 我们有的时候会有根据参数当条件去查找sql,但是参数有的需要有的不需要应该怎么办呢? 就比如这种的 这时候我们可以遍历传进来的参数 request.form会获取他所填写的参数 show = ...
- 3.Unity3d物体操作常用按键
新建一个cube物体.在unity3d界面左上角可以看到红色下划线的五个图标(下面用图标1到5数字表示),分别对应不同功能,这些功能操作物体很常用.下面用cube物体的操作来演示这几个功能. 1.按Q ...