1 使用到了 jquery-table2excel
2 下载地址
3 或者使用已经下载好的js 文件
/*
* jQuery table2excel - v1.0.2
* jQuery plugin to export an .xls file in browser from an HTML table
* https://github.com/rainabba/jquery-table2excel
*
* Made by rainabba
* Under MIT License
*/
//table2excel.js
import jQuery from 'jquery'
;(function ( $, window, document, undefined ) {
var pluginName = "table2excel",
defaults = {
exclude: ".noExl",
name: "Table2Excel"
};
// The actual plugin constructor
function Plugin ( element, options ) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
//
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
var e = this;
e.template = {
head: "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\"><head><meta charset=\"UTF-8\"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>",
sheet: {
head: "<x:ExcelWorksheet><x:Name>",
tail: "</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>"
},
mid: "</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>",
table: {
head: "<table border='1'>",
tail: "</table>"
},
foot: "</body></html>"
};
e.tableRows = [];
// get contents of table except for exclude
$(e.element).each( function(i,o) {
var tempRows = "";
$(o).find("tr").not(e.settings.exclude).each(function (i,o) {
tempRows += "<tr align='center' valign='center'>" + $(o).html() + "</tr>";
});
e.tableRows.push(tempRows);
});
// exclude img tags
if(e.settings.exclude_img) {
e.tableRows[0] = exclude_img(e.tableRows[0]);
}
// exclude link tags
if(e.settings.exclude_links) {
e.tableRows[0] = exclude_links(e.tableRows[0]);
}
// exclude input tags
if(e.settings.exclude_inputs) {
e.tableRows[0] = exclude_inputs(e.tableRows[0])
}
e.tableToExcel(e.tableRows, e.settings.name, e.settings.sheetName);
},
tableToExcel: function (table, name, sheetName) {
var e = this, fullTemplate="", i, link, a;
e.uri = "data:application/vnd.ms-excel;base64,";
e.base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
};
e.format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
});
};
e.ctx = {
worksheet: name || "Worksheet",
table: table
};
fullTemplate= e.template.head;
if ( $.isArray(table) ) {
for (i in table) {
//fullTemplate += e.template.sheet.head + "{worksheet" + i + "}" + e.template.sheet.tail;
fullTemplate += e.template.sheet.head + sheetName + e.template.sheet.tail;
}
}
fullTemplate += e.template.mid;
if ( $.isArray(table) ) {
for (i in table) {
fullTemplate += e.template.table.head + "{table" + i + "}" + e.template.table.tail;
}
}
fullTemplate += e.template.foot;
for (i in table) {
e.ctx["table" + i] = table[i];
}
delete e.ctx.table;
if (typeof msie !== "undefined" && msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
if (typeof Blob !== "undefined") {
//use blobs if we can
fullTemplate = [fullTemplate];
//convert to array
var blob1 = new Blob(fullTemplate, { type: "text/html" });
window.navigator.msSaveBlob(blob1, getFileName(e.settings) );
} else {
//otherwise use the iframe and save
//requires a blank iframe on page called txtArea1
txtArea1.document.open("text/html", "replace");
txtArea1.document.write(fullTemplate);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, getFileName(e.settings) );
}
} else {
link = e.uri + e.base64(e.format(fullTemplate, e.ctx));
a = document.createElement("a");
a.download = getFileName(e.settings);
a.href = link;
a.click();
}
return true;
}
};
function getFileName(settings) {
return ( settings.filename ? settings.filename : "table2excel") + ".xls";
}
// Removes all img tags
function exclude_img(string) {
return string.replace(/<img[^>]*>/gi,"");
}
// Removes all link tags
function exclude_links(string) {
return string.replace(/<A[^>]*>|<\/A>/g, "");
}
// Removes input params
function exclude_inputs(string) {
return string.replace(/<input[^>]*>|<\/input>/gi, "");
}
$.fn[ pluginName ] = function ( options ) {
var e = this;
e.each(function() {
if ( !$.data( e, "plugin_" + pluginName ) ) {
$.data( e, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
// chain jQuery functions
return e;
};
})( jQuery, window, document );
在 Vue 项目使用：
1.创建一个js文件。后放入自己的项目某个目录下。 使用已经下载好的js 文件 （可用，已配置好-C+V 即可）
2.在main.js引入该创建好的JS文件
3.在需要demo.vue 引入import $ from 'jquery'
4.重写dataView-contentToOption方法
toolbox: {
feature: {
dataView: {
show: true,
// readOnly: false
lang: ['数据视图', '关闭', '导出Excel'],
contentToOption: function (opts) {
$("#chartContent").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "数量统计" + new Date().toLocaleDateString(),
exclude_img: true,
exclude_links: true,
exclude_inputs: true,
})
},
optionToContent: function (opt) {
console.log(opt,'------------------')
var axisData = opt['xAxis'][0]['data']; ////坐标数据
var series = opt['series']; //折线图/柱状图 数据
var tdHeads = '<td style="padding: 0 10px">名称</td>'; //表头
var tdBodys = ''; //数据
//组装表头
var nameData = new Array('在用', '丢失', '报废');
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
}
var table=
'<table id="chartContent" border="1" style="width:100%;text-align:center;border-collapse:collapse;"><tbody><tr>' + tdHeads + ' </tr>';
//组装表数据
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++){
var temp = series[j].data[i];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = "";
}
table += '</tbody></table>';
return table;
}
},
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
5.如图
6.即可导出到excel文件
