js前端导出excel：json形式的导出

第一中形式的导出：主要是表头对应主体数据，json形式的导出

js库文件名称 ： table2excel.js这个js库文件是网上找的，并且自己根据自己业务需求把内容改了一下复制到 table2excel.js 文件中，作为自己的js库，就可以使用。记得先引入jq的库

/**  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的形式来导出excel的*/
//table2excel.js
;(function( $, window, document, undefined ) {var pluginName = "table2excel",defaults={filename:"table2excel",//导出excel的名字fileext: ".xls",//导出excel的格式sheetName:"sheet",//sheet的名字// excludeFirst:false,//是否去除第一列，默认去不掉//excudeLast:false,//最后一列是否除去dataList:[],//数据，json数组 必填dataTitle:{}//表格的头 必填
};//The actual plugin constructorfunctionPlugin ( 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把后俩个合并到第一个中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 = "";//标题行tempRowsTitle += "<tr>";for(var key ine.settings.dataTitle){tempRowsTitle+= "<td>" + e.settings.dataTitle[key] + "</td>";}tempRowsTitle+= "</tr>";e.tableRows.push(tempRowsTitle);//循环数据行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 ine.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) {returnc[p];});};sheetName= typeof sheetName === "undefined" ? "Sheet": sheetName;e.ctx={//worksheet: name || "Worksheet",//这个字段无用
table: table,sheetName: sheetName};fullTemplate=e.template.head;if( $.isArray(table) ) {for (i intable) {//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 intable) {fullTemplate+= e.template.table.head + "{table" + i + "}" +e.template.table.tail;}}fullTemplate+=e.template.foot;for (i intable) {e.ctx["table" + i] =table[i];}deletee.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;}};functiongetFileName(settings) {return ( settings.filename ? settings.filename : "table2excel");}//Removes all img tagsfunctionexclude_img(string) {var _patt = /(\s+alt\s*=\s*"([^"]*)"|\s+alt\s*=\s*'([^']*)')/i;return string.replace(/<img[^>]*>/gi, functionmyFunction(x){var res =_patt.exec(x);if (res !== null && res.length >=2) {return res[2];}else{return "";}});}//Removes all link tagsfunctionexclude_links(string) {return string.replace(/<a[^>]*>|<\/a>/gi, "");}//Removes input paramsfunctionexclude_inputs(string) {var _patt = /(\s+value\s*=\s*"([^"]*)"|\s+value\s*=\s*'([^']*)')/i;return string.replace(/<input[^>]*>|<\/input>/gi, functionmyFunction(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 functionsreturne;};})( jQuery, window, document );

根据自己的业务写的一个调用上边库的js工具20181025  这的settings是全局的变量，多个方法调用的导出的时候，会导致并发问题下边会加一个再次修改的

建议：不要使用这个，使用下边的方法这个后边的一个方法

var App ={//导出配置的参数
settings : {//页数pageInt : 1,//每次限制10条limit : 10,//拿到的数据json进行封装到arr数组中
arr : []},//导出excel时候，把页面的数据分装到一个json数组中，主要针对导出数据时候分页多次查询，例如吧：每次查询10条数据，那么这里会循环很多次，每次获取10条数据，封装起来，然后自请求。。。直到把所有的数据拿到，然后执行导出exportExcel : function(url,  excelTitleJson, excelName, data) {if(typeof(data) == "undefined" || data == null){console.log("查询条件为空");data= JSON.parse("{}");}//默认第一页开始导出data["page"] =App.settings.pageInt;$.getJSON(url, data,function(json){if(json.data.length <= 0){//没有查到数据,不导出if(App.settings.arr.length > 0){//table.exportFile([],App.settings.arr , 'xls'); //默认导出 csv，也可以为：xls//这里随意找个类就可以，暂时不会改，但是这样是可以使用的$(".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,//这个是后台获取到的数据，针对对此分页获取数据dataTitle:excelTitleJson});//导出后这个页数,初始化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;//有数据,就再次执行拿数据
App.exportExcel(url, excelTitleJson, excelName, data);}});}
}

调整后的代码，把并发的问题修改了。师兄帮助修改的。自己是没有发现的

var App ={//导出excel时候，把页面的数据分装到一个json数组中，然后使用layui的导出方法导出数据exportExcel : function(url,  excelTitleJson, excelName, data, settings) {if(typeof(data) == "undefined" || data == null){console.log("查询条件为空");data= JSON.parse("{}");}if(!settings){settings={//页数pageInt : 1,//每次限制10条limit : 10,//拿到的数据json进行封装到arr数组中
arr : []}}data["page"] =settings.pageInt;$.getJSON(url, data,function(json){if(json.data.length <= 0){//没有查到数据,不导出if(settings.arr.length > 0){//table.exportFile([],settings.arr , 'xls'); //默认导出 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});//导出后这个页数,初始化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;//有数据,就再次执行拿数据，回调
App.exportExcel(url, excelTitleJson, excelName, data, settings);}});}
}

最后就是使用了

App.exportExcel("/YunApps/com_momathink_crm_zkhq/customer/myCustomerList",{"followStatus":"状态"}, //这里需要填写的是excel导出后的表头，key就是数据库查询出的json数据的每条数据的key，value就是表头，每个表头会对应上它的值"客户信息",//导出excel的名字{}//最后一个参数可填可不填

);

转载于:https://www.cnblogs.com/renjianjun/p/9845733.html

js前端导出excel：json形式的导出相关推荐

前端下载excel表格文件——flie-saver导出类型为csv或者xlsx
前言:这边导出表格数据是纯前端自己导出数据下面方法可以导出格式为xlsx或者csv格式首先要下载file-saver第三方依赖 npm install file-saver --save 然后直接 ...
前端实现excel文件的导入导出
前端实现excel文件的导入导出导入文件导出文件导入文件 html: <el-dropdown v-waves @command="handleBatchCommand" ...
html导出excel 内存不足,web导出excel那些坑
背景介绍昨天在一个前端的微信公众号看到一篇文章介绍导出cvs文件的,想想之前做导出excel的踩过的坑,心想记录一下,或许可以帮助别人吧! 需求很简单,在某个报表页面需要把table导出excel. ...
asp.net中使用excel类导出Excel文件，并导出到web客户端中遇到的问题
asp.net中使用excel类导出Excel文件,并导出到web客户端中遇到错误: 检索Com类工厂中CLSID为{000245-0000-0000-C000-000000000046}的组件失败, ...
java利用poi导出excel功能-附带图片导出
java利用poi导出excel功能-附带图片导出写在前面最近刚离职,闲来无事,于是把上两家公司都有碰到过的需求但都没有去研究实现:即导出带图片的excel报表.于是就折腾了一下这个功能,研究出来 ...
Vue前端实现excel的导入、导出、打印功能
目录一.相关依赖下载二.excel导入功能三.table导出excel表格 1.导出行数据 2.导出table数据(也会导出合并单元格) 3.导出二维数据的table数据 4.导出合并单元格ta ...
js 前端实现将json格式数组下载到excel(xls、xlsx、csv)表格里
项目需求:上传文件时如果有错误信息,则上传不成功,需要提示用户下载查看错误信息.下载查看错误信息是前端根据后台返回的对象数组放到excel表格中的. 后台返回的数组: 效果如下: 在开始之前先要了解一 ...
js 前端合成excel（ThinkPHP5+html+js：比纯后端合成来的快，而且超级简单。）
思路: 因为岗位是PHP,框架用的TP5,所以想用PHPExcel插件生成excel,无赖折腾了半个小时,不想折腾了.所以用js+html做算了(最终花费20分钟,又快又好做). 利用js将上万条数据 ...
Java POI 导出EXCEL经典实现 Java导出Excel
转自http://blog.csdn.net/evangel_z/article/details/7332535 在web开发中,有一个经典的功能,就是数据的导入导出.特别是数据的导出,在生产管理或者 ...

js前端导出excel：json形式的导出

js前端导出excel：json形式的导出相关推荐

最新文章

热门文章