前端表格数据导出excel
使用tableExport.js导出bootstrap-table表格成excel并且支持中文
1. 下载tableExport.js
https://github.com/hhurz/tableExport.jquery.plugin
2. 修改tableExport.js文件,使其支持中文
/*The MIT License (MIT) Original work Copyright (c) 2014 https://github.com/kayalshri/
Modified work Copyright (c) 2015 https://github.com/hhurz/ Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.*/ (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: new Date().toLocaleString(),
htmlContent: false,
ignoreColumn: [],
ignoreRow: [],
jspdf: {
orientation: 'p',
unit: 'pt',
format: 'a4',
margins: { left: 20, right: 10, top: 10, bottom: 10 },
autotable: {
padding: 2,
lineHeight: 12,
fontSize: 8,
tableExport: {
onAfterAutotable: null,
onBeforeAutotable: null,
onTable: null
}
}
},
numbers: {
html: {
decimalMark: '.',
thousandsSeparator: ','
},
output: {
decimalMark: '.',
thousandsSeparator: ','
}
},
onCellData: null,
outputMode: 'file', // file|string|base64
tbodySelector: 'tr',
theadSelector: 'tr',
tableName: 'myTableName',
type: 'csv',
worksheetName: 'xlsWorksheetName'
}; var el = this;
var DownloadEvt = null;
var rowIndex = 0;
var rowspans = [];
var trData = ''; $.extend(true, defaults, options); if (defaults.type == 'csv' || defaults.type == 'txt') { // Header
var csvData = "";
rowIndex = 0;
$(el).find('thead').first().find(defaults.theadSelector).each(function () {
trData = "";
ForEachVisibleCell(this, 'th,td', rowIndex,
function (cell, row, col) {
trData += csvString(cell, row, col) + defaults.csvSeparator;
});
trData = $.trim(trData).substring(0, trData.length - 1);
if (trData.length > 0) { if (csvData.length > 0)
csvData += "\n"; csvData += trData;
}
rowIndex++;
}); // Row vs Column
$(el).find('tbody').first().find(defaults.tbodySelector).each(function () {
trData = "";
ForEachVisibleCell(this, 'th,td', rowIndex,
function (cell, row, col) {
trData += csvString(cell, row, col) + defaults.csvSeparator;
});
trData = $.trim(trData).substring(0, trData.length - 1);
if (trData.length > 0) { if (csvData.length > 0)
csvData += "\n"; csvData += trData;
}
rowIndex++;
}); csvData += "\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([((defaults.type == 'csv' && defaults.csvUseBOM) ? '\ufeff' : '') + csvData], { type: "text/" + (defaults.type == 'csv' ? 'csv' : 'plain') + ";charset=utf-8" });
saveAs(blob, defaults.fileName + '.' + defaults.type);
}
catch (e) {
downloadFile(defaults.fileName + '.' + defaults.type,
'data:text/' + (defaults.type == 'csv' ? 'csv' : 'plain') + ';charset=utf-8,' + ((defaults.type == 'csv' && defaults.csvUseBOM) ? '\ufeff' : '') +
encodeURIComponent(csvData));
} } else if (defaults.type == 'sql') { // Header
rowIndex = 0;
var tdData = "INSERT INTO `" + defaults.tableName + "` (";
$(el).find('thead').first().find(defaults.theadSelector).each(function () { ForEachVisibleCell(this, 'th,td', rowIndex,
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
$(el).find('tbody').first().find(defaults.tbodySelector).each(function () {
trData = "";
ForEachVisibleCell(this, 'th,td', rowIndex,
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,' + encodeURIComponent(tdData));
} } else if (defaults.type == 'json') { var jsonHeaderArray = [];
$(el).find('thead').first().find(defaults.theadSelector).each(function () {
var jsonArrayTd = []; ForEachVisibleCell(this, 'th,td', rowIndex,
function (cell, row, col) {
jsonArrayTd.push(parseString(cell, row, col));
});
jsonHeaderArray.push(jsonArrayTd);
}); var jsonArray = [];
$(el).find('tbody').first().find(defaults.tbodySelector).each(function () {
var jsonArrayTd = []; ForEachVisibleCell(this, 'th,td', rowIndex,
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; var base64data = base64encode(sdata); if (defaults.outputMode == 'base64')
return base64data; 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,' + base64data);
} } else if (defaults.type === 'xml') { rowIndex = 0;
var xml = '<?xml version="1.0" encoding="utf-8"?>';
xml += '<tabledata><fields>'; // Header
$(el).find('thead').first().find(defaults.theadSelector).each(function () { ForEachVisibleCell(this, 'th,td', rowIndex,
function (cell, row, col) {
xml += "<field>" + parseString(cell, row, col) + "</field>";
});
rowIndex++;
});
xml += '</fields><data>'; // Row Vs Column
var rowCount = 1;
$(el).find('tbody').first().find(defaults.tbodySelector).each(function () {
var colCount = 1;
trData = "";
ForEachVisibleCell(this, 'th,td', rowIndex,
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; var base64data = base64encode(xml); if (defaults.outputMode == 'base64')
return base64data; 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,' + base64data);
} } else if (defaults.type == 'excel' || defaults.type == 'doc') {
//console.log($(this).html()); rowIndex = 0;
var excelData = "<table>";
// Header
$(el).find('thead').first().find(defaults.theadSelector).each(function () {
trData = "";
ForEachVisibleCell(this, 'th,td', rowIndex,
function (cell, row, col) {
if (cell != null) {
trData += "<td style='";
for (var styles in defaults.excelstyles) {
if (defaults.excelstyles.hasOwnProperty(styles)) {
trData += defaults.excelstyles[styles] + ": " + $(cell).css(defaults.excelstyles[styles]) + ";";
}
}
trData += "'>" + parseString(cell, row, col) + "</td>";
}
});
if (trData.length > 0)
excelData += "<tr>" + trData + '</tr>';
rowIndex++;
}); // Row Vs Column
$(el).find('tbody').first().find(defaults.tbodySelector).each(function () {
trData = "";
ForEachVisibleCell(this, 'th,td', rowIndex,
function (cell, row, col) {
if (cell != null) {
trData += "<td style='";
for (var styles in defaults.excelstyles) {
if (defaults.excelstyles.hasOwnProperty(styles)) {
trData += defaults.excelstyles[styles] + ": " + $(cell).css(defaults.excelstyles[styles]) + ";";
}
}
if ($(cell).is("[colspan]"))
trData += "' colspan='" + $(cell).attr('colspan');
if ($(cell).is("[rowspan]"))
trData += "' rowspan='" + $(cell).attr('rowspan');
trData += "'>" + parseString(cell, row, col) + "</td>";
}
});
if (trData.length > 0)
excelData += "<tr>" + trData + '</tr>';
rowIndex++;
}); if (defaults.displayTableName)
excelData += "<tr><td></td></tr><tr><td></td></tr><tr><td>" + parseString($('<p>' + defaults.tableName + '</p>')) + "</td></tr>"; excelData += '</table>'; if (defaults.consoleLog === true)
console.log(excelData); var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:" + defaults.type + "' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-' + defaults.type + '; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/';
excelFile += (defaults.type === 'excel') ? 'vnd.ms-excel' : 'msword';
excelFile += '; charset=UTF-8">';
excelFile += "<head>";
if (defaults.type === 'excel') {
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += defaults.worksheetName;
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
}
excelFile += "</head>";
excelFile += "<body>";
excelFile += excelData;
excelFile += "</body>";
excelFile += "</html>"; if (defaults.outputMode == 'string')
return excelFile; var base64data = base64encode(excelFile); if (defaults.outputMode === 'base64')
return base64data; var extension = (defaults.type === 'excel') ? 'xls' : 'doc';
try {
var blob = new Blob([excelFile], { type: 'application/vnd.ms-' + defaults.type });
saveAs(blob, defaults.fileName + '.' + extension);
}
catch (e) {
downloadFile(defaults.fileName + '.' + extension, 'data:application/vnd.ms-' + defaults.type + ';base64,' + base64data);
} } else if (defaults.type == 'png') {
html2canvas($(el), {
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); 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/someatoms/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 fit 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 from below
teOptions.doc = new jsPDF(defaults.jspdf.orientation,
defaults.jspdf.unit,
defaults.jspdf.format); $(el).filter(':visible').each(function () {
if ($(this).css('display') != 'none') {
var colKey;
var rowIndex = 0;
var atOptions = {}; 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
// when 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
Object.keys(defaults.jspdf.autotable).forEach(function (key) {
atOptions[key] = defaults.jspdf.autotable[key];
});
atOptions.margins = {};
$.extend(true, atOptions.margins, defaults.jspdf.margins); if (typeof atOptions.renderCell !== 'function') { // draw cell text with original <td> alignment
atOptions.renderCell = function (x, y, width, height, key, value, row, settings) {
var doc = settings.tableExport.doc;
var xoffset = 0; doc.setFillColor(row % 2 === 0 ? 245 : 255);
doc.setTextColor(50);
doc.rect(x, y, width, height, 'F');
y += settings.lineHeight / 2 + doc.autoTableTextHeight() / 2 - 2.5; if (typeof settings.tableExport.columns[key] != 'undefined') {
var col = settings.tableExport.columns[key];
if (typeof col.style != 'undefined') {
var alignment = col.style.align;
var rowopt = settings.tableExport.rowoptions[(row + 1) + ":" + key]; if (typeof rowopt != 'undefined')
alignment = rowopt.style.align; if (alignment == 'right')
xoffset = width - doc.getStringUnitWidth(('' + value)) * doc.internal.getFontSize() - settings.padding;
else if (alignment == 'center')
xoffset = (width - doc.getStringUnitWidth(('' + value)) * doc.internal.getFontSize()) / 2;
}
} if (xoffset < settings.padding)
xoffset = settings.padding; doc.text(value, x + xoffset, y);
}
} // collect header and data rows
$(this).find('thead').find(defaults.theadSelector).each(function () {
colKey = 0; ForEachVisibleCell(this, 'th,td', rowIndex,
function (cell, row, col) {
var obj = {
title: parseString(cell, row, col),
key: colKey++,
style: {
align: getStyle(cell, 'text-align'),
bcolor: getStyle(cell, 'background-color')
}
};
teOptions.columns.push(obj);
});
rowIndex++;
}); $(this).find('tbody').find(defaults.tbodySelector).each(function () {
var rowData = [];
var rowCount = 0;
colKey = 0; ForEachVisibleCell(this, 'th,td', rowIndex,
function (cell, row, col) {
var obj = {
style: {
align: getStyle(cell, 'text-align'),
bcolor: getStyle(cell, 'background-color')
}
};
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.margins.top;
}
}); jsPdfOutput(teOptions.doc); teOptions.columns.length = 0;
teOptions.rows.length = 0;
delete teOptions.doc;
teOptions.doc = null;
}
} function ForEachVisibleCell(tableRow, selector, rowIndex, cellcallback) {
if (defaults.ignoreRow.indexOf(rowIndex) == -1) {
$(tableRow).filter(':visible').find(selector).each(function (colIndex) {
if ($(this).data("tableexport-display") == 'always' ||
($(this).css('display') != 'none' &&
$(this).css('visibility') != 'hidden' &&
$(this).data("tableexport-display") != 'none')) {
if (defaults.ignoreColumn.indexOf(colIndex) == -1) {
if (typeof (cellcallback) === "function") {
var cs = 0; // colspan value // handle previously detected rowspans
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++;
}
}
} // output content of current cell
cellcallback(this, rowIndex, colIndex); // handle colspan of current cell
if ($(this).is("[colspan]")) {
cs = $(this).attr('colspan');
for (c = 0; c < cs - 1; c++)
cellcallback(null, rowIndex, colIndex + c);
} // store rowspan for following rows
if ($(this).is("[rowspan]")) {
var rs = parseInt($(this).attr('rowspan')); for (r = 1; r < rs; r++) {
if (typeof rowspans[rowIndex + r] == 'undefined')
rowspans[rowIndex + r] = [];
rowspans[rowIndex + r][colIndex] = ""; for (c = 1; c < cs; c++)
rowspans[rowIndex + r][colIndex + 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,' + base64encode(doc.output()));
}
} function escapeRegExp(string) {
return string.replace(/([.*+?^=!:${}()|[Math Processing Error]\/\\])/g, "\\$1");
} function replaceAll(string, find, replace) {
return string.replace(new RegExp(escapeRegExp(find), 'g'), replace);
} 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); if (defaults.htmlContent === true) {
result = $cell.html().trim();
}
else {
result = $cell.text().trim().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();
} // 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, data) {
var DownloadLink = document.createElement('a'); if (DownloadLink) {
document.body.appendChild(DownloadLink);
DownloadLink.style = 'display: none';
DownloadLink.download = filename;
DownloadLink.href = data; 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 <)) {
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 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);
可直接复制使用
3.在html导入应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
</head>
<body> <input type="sumbit" onclick="export_excel()" value="导出Excel" class="btn btn-success">
<table id='table1' class="table table-bordered col-md-8 col-md-offset-2">
<thead>
<tr>
<th>序号</th>
<th>标题</th>
<th>描述</th>
</tr>
</thead> <tr>
<td>1</td>
<td>三国演义</td>
<td>魏蜀吴三国建立争斗史</td>
</tr>
</table>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/tableExportV2.0.js"></script> <script>
function export_excel() {
$('#table1').tableExport({
type:'excel',
fileName:new Date().getTime(),
escape:'false',
ignoreColumn:'[0,2]' });
}
</script>
</body>
</html>
对于tableExport参数解析:
type #支持的类型,如'excel','json','xml','txt','csv','pdf',
fileName #文件名,如保存当前时间年月日时分秒,可以fileName:new Date().toLocaleString()
escape #
ignoreColumn #不包含的列,如ignoreColumn:'[0,2]' ,表示不下载0列和2列
前端表格数据导出excel的更多相关文章
- 将页面中表格数据导出excel格式的文件(vue)
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
- 前端 vue表格数据导出Excel 文件实现
实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- MVC 实现表格数据导出Excel(NPOI方式)
前端View(@ViewBag为查询条件): <span id="exprobtn" class="btn_blue" style="dispa ...
- js 实现纯前端将数据导出excel两种方式,亲测有效
由于项目需要,需要在不调用后台接口的情况下,将json数据导出到excel表格,兼容chrome没问题,其他还没有测试过 通过将json遍历进行字符串拼接,将字符串输出到csv文件,输出的文件不会再是 ...
- 纯前端实现数据导出excel文件
一 安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...
- 前端Table数据导出Excel使用HSSFWorkbook(Java)
一.实现原理: 1. 前端查询列表数据并渲染至table(<table>...</table>)表格 2. 表格html代码传输至后台 3. 后台把html转成Excel输出流 ...
- JS实现前端将数据导出excel
点击此跳到原文,原文有效果动图. 方法一 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但 ...
- Vue2.0---将页面中表格数据导出excel
这不是教程,是随笔. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx ...
随机推荐
- 学习4:内容# 1.列表 # 2.元祖 # 3.range
1.列表 列表 -- list -- 容器 有序,可变,支持索引 列表: 存储数据,支持的数据类型很多 字符串,数字,布尔值,列表,集合,元祖,字典, 定义一个列表 lst = ["dsb& ...
- 《ElasticSearch6.x实战教程》之简单的API
第三章-简单的API 万丈高楼平地起 ES提供了多种操作数据的方式,其中较为常见的方式就是RESTful风格的API. 简单的体验 利用Postman发起HTTP请求(当然也可以在命令行中使用curl ...
- freemarker实现单元格动态合并-行合并
项目需求:项目中有个需求,需要将一些数据库中的数据根据需求导出,生成一个word,研究了一些技术,其中包括POI.freemaker,对比了一下实现过程及技术难度没最终使用了freemaker; 原始 ...
- CentOS 7.3 配置静态ip
镜像:CentOS-7-x86_64-DVD-1511.iso 1.修改.查看虚拟机的网段 1.1.查看虚拟机网段 编辑-> 虚拟机网络编辑器,修改的需要管理员权限 选择NAT模式 点击 NAT ...
- 我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3cp8ng15g94wc
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3cp8ng15g94wc
- 庖丁解牛Linux内核分析 0x00:《庖丁解牛》
庖丁解牛 吾生也有涯,而知也无涯 .以有涯随无涯,殆已!已而为知者,殆而已矣!为善无近名,为恶无近刑.缘督以为经,可以保身,可以全生,可以养亲,可以尽年. 庖丁为文惠君解牛,手之所触,肩之所倚,足之 ...
- .NetCore下ES查询驱动 PlainElastic .Net 升级官方驱动 Elasticsearch .Net
1.背景 由于历史原因,笔者所在的公司原有的ES查询驱动采用的是 PlainElastic.Net, 经过询问原来是之前PlainElastic.Net在园子里文档较多,上手比较容易,所以最初作者选用 ...
- C#中Thread.IsBackground 属性
Thread thread.IsBackground =true; //Gets or sets a value indicating whether or not a thread is a ba ...
- Java_异常介绍
今日内容介绍: 掌握异常概述 理解异常的基础操作以及最简单的捕获处理 理解多异常捕获处理 理解声明抛出异常 掌握自定义异常 掌握异常处理注意事项 异常 什么是异常?Java代码在运行时期发生的问题就是 ...
- python基础——列表(list)
序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列 ...