前端将页面中的table标签的内容导出为excel

1,211 阅读1分钟

一般来说这种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框只是作为一个展示,是不可以修改的,所以老大允许这么做。