前端JS导出Excel表格可筛选列 table2excel

git地址

table2excel

本文参考了

(14条消息) table2excel 导出表格有边框，文字居中_狂吃狂吃的瘦子的博客-CSDN博客_table2excel 边框

效果如图依靠页面列表打印但页面列表如果存在操作和多选列则需要剔除操作和多选列的td

在源码的效果上新增了导出后Excel内容居中（参考了上面文章）且解决了在弹窗内的表格点击导出后无法下载的问题

168和170行分别是在body内插入a标签下载然后删除a标签

但document.body并不在弹窗内部而是在弹窗外部这样的话在弹窗内点击导出时候会因为a标签的问题把blob下载链接拼接到url后导致无法导出注释即可不影响使用

源码在最后

由于是本地导出所以导出时需要筛选掉多选和操作的td 代码样式有些许臃肿可以粘贴到静态页面查看效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table style="width:1503px;"><thead><tr><td><input type="checkbox"></td><td>序号</td><td>编号</td><td>库存类型</td><td>数量</td><td>单位</td><td>创建时间</td><td>操作</td></tr></thead><tbody><tr class=""><td><input type="checkbox"></td><td>1</td><td>3</td><td><span>肥料</span></td><td>1</td><td>1</td><td>2022-03-09 09:19:10.0</td><td><button>修改</button><button>删除</button><button>详情</button></td></tr><tr class=""><td><input type="checkbox"></td><td>2</td><td>1</td><td><span>农药</span></td><td>800</td><td>ml</td><td>2022-02-24 13:52:31.0</td><td><button>修改</button><button>删除</button><button>详情</button></td></tr><tr class="tr-hover"><td><input type="checkbox"></td><td>3</td><td>2</td><td><span>农药</span></td><td>100</td><td>ml</td><td>2022-02-24 13:50:35.0</td><td><button>修改</button><button>删除</button><button>详情</button></td></tr><tr class=""><td><input type="checkbox"></td><td>4</td><td>1</td><td><span>肥料</span></td><td>50</td><td>kg</td><td>2022-02-24 13:50:06.0</td><td><button>修改</button><button>删除</button><button>详情</button></td></tr><tr class=""><td><input type="checkbox"></td><td>5</td><td>0</td><td><span>籽种</span></td><td>175</td><td>kg</td><td>2022-02-23 17:38:58.0</td><td><button>修改</button><button>删除</button><button>详情</button></td></tr></tbody></table><button class="btn">Excel导出</button>
</body>
<script src="./js/jQuery.js"></script>
<script src="./js/dist_jquery.table2excel.min.js"></script>
<script>$('.btn').click(function () {// 给每个tr的第一个和最后一个td追加class为not 不导出多选和操作列$("table tr").each(function () {$(this).find("td:first").addClass('not')$(this).find("td:last").addClass('not')})$('table').addClass('tables')$(".tables").table2excel({exclude: '.not', //不被导出表格行的class类name: 'Excel', // 文档名称filename: 'excel', // 导出文件名称exclude_img: false, //是否导出图片exclude_links: false, //是否导出超链接exclude_inputs: false //是否导出input框中的内容})})
</script></html>

修改后的 dist_jquery.table2excel.min.js

;(function ( $, window, document, undefined ) {var pluginName = "table2excel",defaults = {exclude: ".noExl",name: "Table2Excel",filename: "table2excel",fileext: ".xls",exclude_img: true,exclude_links: true,exclude_inputs: true};// 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//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 = [];// 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,p) {tempRows += "<tr align='center' valign='center' >"; //文字居中$(p).find("td,th").not(e.settings.exclude).each(function (i,q) { // p did not exist, I correctedvar rc = {rows: $(this).attr("rowspan"),cols: $(this).attr("colspan"),flag: $(q).find(e.settings.exclude)};if( rc.flag.length > 0 ) {tempRows += "<td align='center' valign='center' > </td>"; // exclude it!! //文字居中} else {tempRows += "<td align='center' valign='center' "; //文字居中if( rc.rows > 0) {tempRows += " rowspan=\'" + rc.rows + "\' ";}if( rc.cols > 0) {tempRows += " colspan=\'" + rc.cols + "\' ";}tempRows += "/>" + $(q).html() + "</td>";}});tempRows += "</tr>";});// exclude img tagsif(e.settings.exclude_img) {tempRows = exclude_img(tempRows);}// exclude link tagsif(e.settings.exclude_links) {tempRows = exclude_links(tempRows);}// exclude input tagsif(e.settings.exclude_inputs) {tempRows = exclude_inputs(tempRows);}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",table: table,sheetName: sheetName};fullTemplate= e.template.head;if ( $.isArray(table) ) {Object.keys(table).forEach(function(i){//fullTemplate += e.template.sheet.head + "{worksheet" + i + "}" + e.template.sheet.tail;fullTemplate += e.template.sheet.head + sheetName + i + e.template.sheet.tail;});}fullTemplate += e.template.mid;if ( $.isArray(table) ) {Object.keys(table).forEach(function(i){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() {if ( !$.data( e, "plugin_" + pluginName ) ) {$.data( e, "plugin_" + pluginName, new Plugin( this, options ) );}});// chain jQuery functionsreturn e;};})( jQuery, window, document );

前端JS导出Excel表格可筛选列 table2excel相关推荐

前端自己导出excel表格不需要调接口（可导出全部的数据）
前端自己导出excel表格不需要调接口(可导出全部的数据) 1.下载 npm install -S file-saver xlsx 2.把js放在对应的位置全部复制(Export2Excel.js ...
前端 table 导出excel表格方法
需求:获取后台数据,动态生成table后,导出excel表格,要求格式与table格式一致直接上代码: <a id="export">导出</a> < ...
前端table导出excel表格方法汇总
在做一些后台管理系统中,经常会遇到table 组件:然后需要导出excel.开发中实现方法如下: 第一类:后端来做导出功能(后端做更合适) 1. 后端生成excel,返回一个url地址:前端直接利用浏 ...
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
之前写过一篇博客,是关于elementUi-table组件+xlsx插件实现导出--sheetJs的,之前实现的功能有: 根据dom获取内容创建工作簿调整单元格的宽度实现百分数的展示插入到工作 ...
前端js导出Excel库(js-export-excel)在React/Vue中使用参考
目录前言目前有个需求是不通过后端,前端直接导出表格数据.从网上找了一个库,发现很好用 ,所以简单记录下,方便日后查阅 GitHub地址: [https://github.com/cuikangji ...
原生js导出excel表格，0开头的字符串自动去掉转换成数字
解决方式.优化方式: // 解决excel下载前边的0消失问题 ' ' + value + ' ' 但是此方式导出的excel表格会有警告:该内容前后有空字符串,会影响计算优化解决方式: <t ...
js导出excel（js-export-excel）
js导出excel表格这个需求在后台管理系统中很常见, 我们使用js-export-excel进行excel的导出首先在我们的项目中安装这个包 npm install js-export-exce ...
html 导出excel 列被合并,前端实现导出excel单元格合并和调整样式
有些业务场景需要导出excel表格,寻常这类需求其实是服务端完成,但是前端也有可以实现这类需求的库,这里我介绍最近使用过的三个库. 通用电子表格格式(CSF) 单元地址对象存储为{c:C, r:R}, ...
前端导出Excel表格
vue + xlsx实现Excel导出简单粗暴步骤,无需花里胡哨第一步:npm install --save xlsx@0.14.3 第二步:全局封装公共方法(或者局部定义) import XLS ...

前端JS导出Excel表格可筛选列 table2excel

前端JS导出Excel表格可筛选列 table2excel相关推荐

最新文章

热门文章

前端JS导出Excel表格 可筛选列 table2excel

前端JS导出Excel表格 可筛选列 table2excel相关推荐

最新文章

热门文章

前端JS导出Excel表格可筛选列 table2excel

前端JS导出Excel表格可筛选列 table2excel相关推荐