js前端导出excel：json形式的导出
生活随笔
收集整理的這篇文章主要介紹了
js前端导出excel：json形式的导出
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
第一中形式的導(dǎo)出：主要是表頭對(duì)應(yīng)主體數(shù)據(jù)，json形式的導(dǎo)出
js庫(kù)文件名稱 ： table2excel.js
這個(gè)js庫(kù)文件是網(wǎng)上找的，并且自己根據(jù)自己業(yè)務(wù)需求把內(nèi)容改了一下
復(fù)制到 table2excel.js 文件中，作為自己的js庫(kù)，就可以使用。記得先引入jq的庫(kù)
/** jQuery table2excel - v1.1.1* 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*/ /** jQuery table2excel - v1.1.1* 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* * *把所有的樣式移除了 * 這里是以json的形式來導(dǎo)出excel的*/ //table2excel.js ;(function ( $, window, document, undefined ) {var pluginName = "table2excel",defaults = {filename: "table2excel",//導(dǎo)出excel的名字fileext: ".xls",//導(dǎo)出excel的格式sheetName:"sheet",//sheet的名字// excludeFirst:false,//是否去除第一列，默認(rèn)去不掉//excudeLast:false,//最后一列是否除去dataList:[],//數(shù)據(jù)，json數(shù)組 必填dataTitle:{}//表格的頭 必填 };// The actual plugin constructorfunction 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//extend把后倆個(gè)合并到第一個(gè)中this.settings = $.extend( {}, defaults, options );this._defaults = defaults;this._name = pluginName;this.init();}Plugin.prototype = {init: function () {var e = this;var utf8Heading = "<meta http-equiv=\"content-type\" content=\"application/vnd.ms-excel; charset=UTF-8\">";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\">" + utf8Heading + "<head><!--[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>",tail: "</table>"},foot: "</body></html>"};e.tableRows = [];if(e.settings.dataTitle.length < 0 || e.settings.dataTitle == ""){console.log("不可以沒有title");return false;}var tempRowsTitle = "";//標(biāo)題行tempRowsTitle += "<tr>";for(var key in e.settings.dataTitle){tempRowsTitle += "<td>" + e.settings.dataTitle[key] + "</td>";}tempRowsTitle += "</tr>";e.tableRows.push(tempRowsTitle);//循環(huán)數(shù)據(jù)行var listNum = e.settings.dataList.length;var list = e.settings.dataList;for(var i=0; i < Number(listNum); i++ ){var tempRows = "";tempRows += "<tr>";for(var key in e.settings.dataTitle){tempRows += "<td>" + (typeof(list[i][key]) == "undefined" ? "--" : list[i][key] == null ? "--" : list[i][key]) + "</td>";}tempRows += "</tr>";//每行都添加到里邊 e.tableRows.push(tempRows);}e.tableToExcel(e.tableRows, e.settings.name, e.settings.sheetName);},tableToExcel: function (table, name, sheetName) {var e = this, fullTemplate="", i, link, a;e.format = function (s, c) {return s.replace(/{(\w+)}/g, function (m, p) {return c[p];});};sheetName = typeof sheetName === "undefined" ? "Sheet" : sheetName;e.ctx = {// worksheet: name || "Worksheet",//這個(gè)字段無用 table: table,sheetName: sheetName};fullTemplate= e.template.head;if ( $.isArray(table) ) {for (i in table) {//fullTemplate += e.template.sheet.head + "{" + e.ctx.worksheet + i + "}" + e.template.sheet.tail;fullTemplate += e.template.sheet.head + sheetName + i + 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;var isIE = /*@cc_on!@*/false || !!document.documentMode; // this works with IE10 and IE11 both :) //if (typeof msie !== "undefined" && msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // this works ONLY with IE 11!!!if (isIE) {if (typeof Blob !== "undefined") {//use blobs if we canfullTemplate = e.format(fullTemplate, e.ctx); // with this, works with IEfullTemplate = [fullTemplate];//convert to arrayvar 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 txtArea1txtArea1.document.open("text/html", "replace");txtArea1.document.write(e.format(fullTemplate, e.ctx));txtArea1.document.close();txtArea1.focus();sa = txtArea1.document.execCommand("SaveAs", true, getFileName(e.settings) );}} else {var blob = new Blob([e.format(fullTemplate, e.ctx)], {type: "application/vnd.ms-excel"});window.URL = window.URL || window.webkitURL;link = window.URL.createObjectURL(blob);a = document.createElement("a");a.download = getFileName(e.settings);a.href = link;document.body.appendChild(a);a.click();document.body.removeChild(a);}return true;}};function getFileName(settings) {return ( settings.filename ? settings.filename : "table2excel" );}// Removes all img tagsfunction exclude_img(string) {var _patt = /(\s+alt\s*=\s*"([^"]*)"|\s+alt\s*=\s*'([^']*)')/i;return string.replace(/<img[^>]*>/gi, function myFunction(x){var res = _patt.exec(x);if (res !== null && res.length >=2) {return res[2];} else {return "";}});}// Removes all link tagsfunction exclude_links(string) {return string.replace(/<a[^>]*>|<\/a>/gi, "");}// Removes input paramsfunction exclude_inputs(string) {var _patt = /(\s+value\s*=\s*"([^"]*)"|\s+value\s*=\s*'([^']*)')/i;return string.replace(/<input[^>]*>|<\/input>/gi, function myFunction(x){var res = _patt.exec(x);if (res !== null && res.length >=2) {return res[2];} else {return "";}});}$.fn[ pluginName ] = function ( options ) {var e = this;e.each(function() {//console.log(options)if ( !$.data( e, "plugin_" + pluginName ) ) {$.data( e, "plugin_" + pluginName, new Plugin( this, options ) );}});// chain jQuery functionsreturn e;};})( jQuery, window, document ); 根據(jù)自己的業(yè)務(wù)寫的一個(gè)調(diào)用上邊庫(kù)的js工具
20181025 這的settings是全局的變量，多個(gè)方法調(diào)用的導(dǎo)出的時(shí)候，會(huì)導(dǎo)致并發(fā)問題
下邊會(huì)加一個(gè)再次修改的
建議：不要使用這個(gè)，使用下邊的方法這個(gè)后邊的一個(gè)方法
var App ={//導(dǎo)出配置的參數(shù) settings : {//頁數(shù)pageInt : 1,//每次限制10條limit : 10,//拿到的數(shù)據(jù)json進(jìn)行封裝到arr數(shù)組中 arr : []},//導(dǎo)出excel時(shí)候，把頁面的數(shù)據(jù)分裝到一個(gè)json數(shù)組中，主要針對(duì)導(dǎo)出數(shù)據(jù)時(shí)候分頁多次查詢，例如吧：每次查詢10條數(shù)據(jù)，那么這里會(huì)循環(huán)很多次，每次獲取10條數(shù)據(jù)，封裝起來，然后自請(qǐng)求。。。直到把所有的數(shù)據(jù)拿到，然后執(zhí)行導(dǎo)出exportExcel : function (url, excelTitleJson, excelName, data) {if(typeof(data) == "undefined" || data == null){console.log("查詢條件為空");data = JSON.parse("{}");}//默認(rèn)第一頁開始導(dǎo)出data["page"] = App.settings.pageInt;$.getJSON(url, data, function(json){if(json.data.length <= 0){//沒有查到數(shù)據(jù),不導(dǎo)出if(App.settings.arr.length > 0){//table.exportFile([],App.settings.arr , 'xls'); //默認(rèn)導(dǎo)出 csv，也可以為：xls//這里隨意找個(gè)類就可以，暫時(shí)不會(huì)改，但是這樣是可以使用的$(".layui-table-box").table2excel({//exclude: ".noExl",filename: excelName + new Date().toISOString().replace(/[\-\:\.]/g, ""),fileext: ".xls",sheetName: "sheet",// excludeFirst:true,// excudeLast:true,dataList:App.settings.arr,//這個(gè)是后臺(tái)獲取到的數(shù)據(jù)，針對(duì)對(duì)此分頁獲取數(shù)據(jù)dataTitle:excelTitleJson});//導(dǎo)出后這個(gè)頁數(shù),初始化page:App.settings.pageInt = 1;}}else{for(var i = 0;i<json.data.length;i++){App.settings.arr.push(json.data[i]);}App.settings.pageInt++;data["page"] = App.settings.pageInt;//有數(shù)據(jù),就再次執(zhí)行拿數(shù)據(jù) App.exportExcel(url, excelTitleJson, excelName, data);}});} }
var App ={//導(dǎo)出excel時(shí)候，把頁面的數(shù)據(jù)分裝到一個(gè)json數(shù)組中，然后使用layui的導(dǎo)出方法導(dǎo)出數(shù)據(jù)exportExcel : function (url, excelTitleJson, excelName, data, settings) {if(typeof(data) == "undefined" || data == null){console.log("查詢條件為空");data = JSON.parse("{}");}if(! settings){settings = {//頁數(shù)pageInt : 1,//每次限制10條limit : 10,//拿到的數(shù)據(jù)json進(jìn)行封裝到arr數(shù)組中 arr : []}}data["page"] = settings.pageInt;$.getJSON(url, data, function(json){if(json.data.length <= 0){//沒有查到數(shù)據(jù),不導(dǎo)出if(settings.arr.length > 0){//table.exportFile([],settings.arr , 'xls'); //默認(rèn)導(dǎo)出 csv，也可以為：xls $(".layui-table-box").table2excel({//exclude: ".noExl",filename: excelName + new Date().toISOString().replace(/[\-\:\.]/g, ""),fileext: ".xls",sheetName: "sheet",excludeFirst:true,excudeLast:true,dataList:settings.arr,dataTitle:excelTitleJson});//導(dǎo)出后這個(gè)頁數(shù),初始化page:settings.pageInt = 1;}}else{for(var i = 0;i<json.data.length;i++){settings.arr.push(json.data[i]);}settings.pageInt++;data["page"] = settings.pageInt;//有數(shù)據(jù),就再次執(zhí)行拿數(shù)據(jù)，回調(diào) App.exportExcel(url, excelTitleJson, excelName, data, settings);}});} }
{"followStatus":"狀態(tài)"}, //這里需要填寫的是excel導(dǎo)出后的表頭，key就是數(shù)據(jù)庫(kù)查詢出的json數(shù)據(jù)的每條數(shù)據(jù)的key，value就是表頭，每個(gè)表頭會(huì)對(duì)應(yīng)上它的值
"客戶信息",//導(dǎo)出excel的名字
{}//最后一個(gè)參數(shù)可填可不填 );
js庫(kù)文件名稱 ： table2excel.js
這個(gè)js庫(kù)文件是網(wǎng)上找的，并且自己根據(jù)自己業(yè)務(wù)需求把內(nèi)容改了一下
復(fù)制到 table2excel.js 文件中，作為自己的js庫(kù)，就可以使用。記得先引入jq的庫(kù)
/** jQuery table2excel - v1.1.1* 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*/ /** jQuery table2excel - v1.1.1* 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* * *把所有的樣式移除了 * 這里是以json的形式來導(dǎo)出excel的*/ //table2excel.js ;(function ( $, window, document, undefined ) {var pluginName = "table2excel",defaults = {filename: "table2excel",//導(dǎo)出excel的名字fileext: ".xls",//導(dǎo)出excel的格式sheetName:"sheet",//sheet的名字// excludeFirst:false,//是否去除第一列，默認(rèn)去不掉//excudeLast:false,//最后一列是否除去dataList:[],//數(shù)據(jù)，json數(shù)組 必填dataTitle:{}//表格的頭 必填 };// The actual plugin constructorfunction 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//extend把后倆個(gè)合并到第一個(gè)中this.settings = $.extend( {}, defaults, options );this._defaults = defaults;this._name = pluginName;this.init();}Plugin.prototype = {init: function () {var e = this;var utf8Heading = "<meta http-equiv=\"content-type\" content=\"application/vnd.ms-excel; charset=UTF-8\">";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\">" + utf8Heading + "<head><!--[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>",tail: "</table>"},foot: "</body></html>"};e.tableRows = [];if(e.settings.dataTitle.length < 0 || e.settings.dataTitle == ""){console.log("不可以沒有title");return false;}var tempRowsTitle = "";//標(biāo)題行tempRowsTitle += "<tr>";for(var key in e.settings.dataTitle){tempRowsTitle += "<td>" + e.settings.dataTitle[key] + "</td>";}tempRowsTitle += "</tr>";e.tableRows.push(tempRowsTitle);//循環(huán)數(shù)據(jù)行var listNum = e.settings.dataList.length;var list = e.settings.dataList;for(var i=0; i < Number(listNum); i++ ){var tempRows = "";tempRows += "<tr>";for(var key in e.settings.dataTitle){tempRows += "<td>" + (typeof(list[i][key]) == "undefined" ? "--" : list[i][key] == null ? "--" : list[i][key]) + "</td>";}tempRows += "</tr>";//每行都添加到里邊 e.tableRows.push(tempRows);}e.tableToExcel(e.tableRows, e.settings.name, e.settings.sheetName);},tableToExcel: function (table, name, sheetName) {var e = this, fullTemplate="", i, link, a;e.format = function (s, c) {return s.replace(/{(\w+)}/g, function (m, p) {return c[p];});};sheetName = typeof sheetName === "undefined" ? "Sheet" : sheetName;e.ctx = {// worksheet: name || "Worksheet",//這個(gè)字段無用 table: table,sheetName: sheetName};fullTemplate= e.template.head;if ( $.isArray(table) ) {for (i in table) {//fullTemplate += e.template.sheet.head + "{" + e.ctx.worksheet + i + "}" + e.template.sheet.tail;fullTemplate += e.template.sheet.head + sheetName + i + 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;var isIE = /*@cc_on!@*/false || !!document.documentMode; // this works with IE10 and IE11 both :) //if (typeof msie !== "undefined" && msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // this works ONLY with IE 11!!!if (isIE) {if (typeof Blob !== "undefined") {//use blobs if we canfullTemplate = e.format(fullTemplate, e.ctx); // with this, works with IEfullTemplate = [fullTemplate];//convert to arrayvar 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 txtArea1txtArea1.document.open("text/html", "replace");txtArea1.document.write(e.format(fullTemplate, e.ctx));txtArea1.document.close();txtArea1.focus();sa = txtArea1.document.execCommand("SaveAs", true, getFileName(e.settings) );}} else {var blob = new Blob([e.format(fullTemplate, e.ctx)], {type: "application/vnd.ms-excel"});window.URL = window.URL || window.webkitURL;link = window.URL.createObjectURL(blob);a = document.createElement("a");a.download = getFileName(e.settings);a.href = link;document.body.appendChild(a);a.click();document.body.removeChild(a);}return true;}};function getFileName(settings) {return ( settings.filename ? settings.filename : "table2excel" );}// Removes all img tagsfunction exclude_img(string) {var _patt = /(\s+alt\s*=\s*"([^"]*)"|\s+alt\s*=\s*'([^']*)')/i;return string.replace(/<img[^>]*>/gi, function myFunction(x){var res = _patt.exec(x);if (res !== null && res.length >=2) {return res[2];} else {return "";}});}// Removes all link tagsfunction exclude_links(string) {return string.replace(/<a[^>]*>|<\/a>/gi, "");}// Removes input paramsfunction exclude_inputs(string) {var _patt = /(\s+value\s*=\s*"([^"]*)"|\s+value\s*=\s*'([^']*)')/i;return string.replace(/<input[^>]*>|<\/input>/gi, function myFunction(x){var res = _patt.exec(x);if (res !== null && res.length >=2) {return res[2];} else {return "";}});}$.fn[ pluginName ] = function ( options ) {var e = this;e.each(function() {//console.log(options)if ( !$.data( e, "plugin_" + pluginName ) ) {$.data( e, "plugin_" + pluginName, new Plugin( this, options ) );}});// chain jQuery functionsreturn e;};})( jQuery, window, document ); 根據(jù)自己的業(yè)務(wù)寫的一個(gè)調(diào)用上邊庫(kù)的js工具
20181025 這的settings是全局的變量，多個(gè)方法調(diào)用的導(dǎo)出的時(shí)候，會(huì)導(dǎo)致并發(fā)問題
下邊會(huì)加一個(gè)再次修改的
建議：不要使用這個(gè)，使用下邊的方法這個(gè)后邊的一個(gè)方法
var App ={//導(dǎo)出配置的參數(shù) settings : {//頁數(shù)pageInt : 1,//每次限制10條limit : 10,//拿到的數(shù)據(jù)json進(jìn)行封裝到arr數(shù)組中 arr : []},//導(dǎo)出excel時(shí)候，把頁面的數(shù)據(jù)分裝到一個(gè)json數(shù)組中，主要針對(duì)導(dǎo)出數(shù)據(jù)時(shí)候分頁多次查詢，例如吧：每次查詢10條數(shù)據(jù)，那么這里會(huì)循環(huán)很多次，每次獲取10條數(shù)據(jù)，封裝起來，然后自請(qǐng)求。。。直到把所有的數(shù)據(jù)拿到，然后執(zhí)行導(dǎo)出exportExcel : function (url, excelTitleJson, excelName, data) {if(typeof(data) == "undefined" || data == null){console.log("查詢條件為空");data = JSON.parse("{}");}//默認(rèn)第一頁開始導(dǎo)出data["page"] = App.settings.pageInt;$.getJSON(url, data, function(json){if(json.data.length <= 0){//沒有查到數(shù)據(jù),不導(dǎo)出if(App.settings.arr.length > 0){//table.exportFile([],App.settings.arr , 'xls'); //默認(rèn)導(dǎo)出 csv，也可以為：xls//這里隨意找個(gè)類就可以，暫時(shí)不會(huì)改，但是這樣是可以使用的$(".layui-table-box").table2excel({//exclude: ".noExl",filename: excelName + new Date().toISOString().replace(/[\-\:\.]/g, ""),fileext: ".xls",sheetName: "sheet",// excludeFirst:true,// excudeLast:true,dataList:App.settings.arr,//這個(gè)是后臺(tái)獲取到的數(shù)據(jù)，針對(duì)對(duì)此分頁獲取數(shù)據(jù)dataTitle:excelTitleJson});//導(dǎo)出后這個(gè)頁數(shù),初始化page:App.settings.pageInt = 1;}}else{for(var i = 0;i<json.data.length;i++){App.settings.arr.push(json.data[i]);}App.settings.pageInt++;data["page"] = App.settings.pageInt;//有數(shù)據(jù),就再次執(zhí)行拿數(shù)據(jù) App.exportExcel(url, excelTitleJson, excelName, data);}});} }
?
調(diào)整后的代碼，把并發(fā)的問題修改了。師兄幫助修改的。自己是沒有發(fā)現(xiàn)的var App ={//導(dǎo)出excel時(shí)候，把頁面的數(shù)據(jù)分裝到一個(gè)json數(shù)組中，然后使用layui的導(dǎo)出方法導(dǎo)出數(shù)據(jù)exportExcel : function (url, excelTitleJson, excelName, data, settings) {if(typeof(data) == "undefined" || data == null){console.log("查詢條件為空");data = JSON.parse("{}");}if(! settings){settings = {//頁數(shù)pageInt : 1,//每次限制10條limit : 10,//拿到的數(shù)據(jù)json進(jìn)行封裝到arr數(shù)組中 arr : []}}data["page"] = settings.pageInt;$.getJSON(url, data, function(json){if(json.data.length <= 0){//沒有查到數(shù)據(jù),不導(dǎo)出if(settings.arr.length > 0){//table.exportFile([],settings.arr , 'xls'); //默認(rèn)導(dǎo)出 csv，也可以為：xls $(".layui-table-box").table2excel({//exclude: ".noExl",filename: excelName + new Date().toISOString().replace(/[\-\:\.]/g, ""),fileext: ".xls",sheetName: "sheet",excludeFirst:true,excudeLast:true,dataList:settings.arr,dataTitle:excelTitleJson});//導(dǎo)出后這個(gè)頁數(shù),初始化page:settings.pageInt = 1;}}else{for(var i = 0;i<json.data.length;i++){settings.arr.push(json.data[i]);}settings.pageInt++;data["page"] = settings.pageInt;//有數(shù)據(jù),就再次執(zhí)行拿數(shù)據(jù)，回調(diào) App.exportExcel(url, excelTitleJson, excelName, data, settings);}});} }
?
?
?
最后就是使用了
?
App.exportExcel("/YunApps/com_momathink_crm_zkhq/customer/myCustomerList",{"followStatus":"狀態(tài)"}, //這里需要填寫的是excel導(dǎo)出后的表頭，key就是數(shù)據(jù)庫(kù)查詢出的json數(shù)據(jù)的每條數(shù)據(jù)的key，value就是表頭，每個(gè)表頭會(huì)對(duì)應(yīng)上它的值
"客戶信息",//導(dǎo)出excel的名字
{}//最后一個(gè)參數(shù)可填可不填 );
?
轉(zhuǎn)載于:https://www.cnblogs.com/renjianjun/p/9845733.html
總結(jié)
以上是生活随笔為你收集整理的js前端导出excel：json形式的导出的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 当交易所开始“革命”，整个行业将“为之一
- 下一篇： BZOJ 5064: B-number