一般来说这种table标签内容导出为excel都是后台来做的,但是有时候就是需要前端来用插件做,今天利用一个jquery插件为table2excel.js可以做到这一点,但是遇到一个坑就是原来的表格里面单元格里面含有input框,此时用它去导出的时候input内容无法导出,然后去网上百度解决办法,但是无法解决,以下为解决办法
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="./jquery.table2excel(3).js"></script>
$(function() {
$('.btn').click(function() {
$('.table2excel tr').each(function(i, _tr) {
//循环表格的行
var tds = $(_tr).find('td') //得到每行的所有列
tds.each(function(j, _td) {
//循环每列
var _ipt = $(_td).find('input') //查找每列当中的INPUT控件
var hasInput = _ipt.length > 0 ? 1 : 0
if (hasInput) {
//console.log('第'+(i+1)+'行'+(j+1)+'列含有INPUT控件');
console.log(_ipt.val())
_ipt.attr('value', _ipt.val()) //如果有INPUT控件就给它设置value值
}
})
})
$('.table2excel').table2excel({
// 不被导出的表格行的CSS class类
exclude: '.noExl',
// 导出的Excel文档的名称
name: 'Excel Document Name',
// Excel文件的名称
filename: 'test',
//文件后缀名
fileext: '.xls',
//是否排除导出图片
exclude_img: true,
//是否排除导出超链接
exclude_links: true,
//是否排除导出输入框中的内容
exclude_inputs: true
})
})
})
以上方法并不能解决input框的内容导出不了的问题,后面无奈只能取巧,将表格里面的input元素改为span元素,在用css修改样式,改的看起来像一个input框,因为原来的这个input框只是作为一个展示,是不可以修改的,所以老大允许这么做。