欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Jquery CSV 导出工具 ,前端导出csv文件

程序员文章站 2022-06-01 14:11:59
...

代码更新时间:2019-11-12

最近在做个csv 导出的功能,网上的插件也是找了挺多,但是感觉不是很好用,并且部分中文和特殊符号还乱码 例如:TableExport 这个工具 虽然很强大吧 ,不过中文支持的还是不是很友好,就比如下面的数据:

如图:

Jquery CSV 导出工具 ,前端导出csv文件

 

图片太大已做压缩,大致的都是日文的内容,这就很蛋疼了,再三找来找去下,算了自己写一个吧,搜搜资料找了下例子,其实导出成csv 也不难。经过半天的折腾,终于写出了下面的例子,献上仅供参考,大部分功能是根据我的需求来封装的,有需要的朋友可以自己去改改。

代码如下:

<html>
<style>
  .dropdown__body {
    display: none;
  }

  .testcss {
    display: none;
  }
</style>

<body>

  <table border="1" id="resultsTable">
    <tr>
      <th><a href="#">&nbsp;操作&nbsp;</a></th>
      <th>Month</th>
      <th>Savings</th>
      <th>mm</th>
      <td></td>
    </tr>
    <tr>
      <td><a href="#">&nbsp;删除&nbsp;</a></td>
      <td>&nbsp;2019-11-12&nbsp;</td>
      <td>$120</td>
      <td>小帅<span class="dropdown__body">小帅22</span><span style="display: none;">小帅33</span></td>
      <td></td>
    </tr>
    <tr></tr>
    <tr>
      <td><a href="#">&nbsp;删除&nbsp;</a></td>
      <td>&nbsp;2019-11-11&nbsp;</td>
      <td>$103</td>
      <td>小天<span class="testcss">小天4444</span></td>
      <td></td>
    </tr>
    <tr></tr>
    <tr>
      <td><a href="#">&nbsp;删除&nbsp;</a></td>
      <td>&nbsp;2019-11-10&nbsp;</td>
      <td>$130</td>
      <td>小广</td>
      <td></td>
    </tr>
    <tr></tr>
    <tr>
      <td><a href="#">&nbsp;删除&nbsp;</a></td>
      <td>&nbsp;2019-11-15&nbsp;</td>
      <td>$23123</td>
      <td>小蓝</td>
      <td></td>
    </tr>
    <tr></tr>
    <tr>
      <td><a href="#">&nbsp;删除&nbsp;</a></td>
      <td>&nbsp;2019-11-16&nbsp;</td>
      <td>$123</td>
      <td>小红</td>
      <td></td>
    </tr>
    <tr></tr>
  </table>
  <br />
  <button οnclick="exportCsv()">导出CSV</button>

  <!--引入jquery-->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

  <script type="text/javascript">

    /*
    作者:APan
    时间:2019-11-12
    博客地址:https://blog.csdn.net/qq_40729514
    转载请注明出处,尊重作者版权!
    */
     
    var exportCsvTool = {
      tableId: "",               //table id 或者 class
      fileName: "",              //文件名字
      tableHeader: [],           //自定义表格头
      showHeader: true,          //是否显示表格头  true 显示 false 不显示
      ignoredColumns: [],        //需要忽略的列
      ignoredRows: [],           //需要忽略的行
      ignoreAttribute: [],       //提取文本时需要忽略掉的属性   {attrName:'属性名字',attrValue:'属性值'}
      removeStrExpression: "",   //需要移除的字符串 正则表达式  例如: /[,]/g 移除所有的 ,号
      ignoreEmptyColumns: true,  //忽略空的列
      ignoreEmptyRows: true,     //忽略空的行
      headerPosition: 0,         //表头的起始位置 默认为0 没有表头则传 -1
      export() {

        var _this = this;
        var dateArray = _this.getTableData();
        _this.outCsv(JSON.stringify(dateArray));
      },
      getTableData() {

        var _this = this;
        var dataArray = [];
        var index = 0;
        if (_this.headerPosition >= 0)
          index = _this.headerPosition + 1;

        var trs = $(_this.tableId).find("tr");
        for (index; index < trs.length; index++) {

          //忽略空的行
          if (_this.ignoreEmptyRows && $(trs[index]).html() == "")
            continue;

          //跳过需要忽略的行
          if (_this.ignoredRows.indexOf(index) >= 0)
            continue;

          var RowData = [];
          var tds = $(trs[index]).find("td,th");

          for (var i = 0; i < tds.length; i++) {

            //跳过需要忽略的列
            if (_this.ignoredColumns.indexOf(i) >= 0)
              continue;

            var tdText = $(tds[i]).text();

            //是否忽略空的列
            if (_this.ignoreEmptyColumns && tdText == "")
              continue;
            else {

              //提取文本时需要过滤掉的内容 属性
              if (_this.ignoreAttribute.length > 0) {

                tdText = $(tds[i]).contents().filter(function () {

                  //表达式拼接
                  var express = $(this).attr(_this.ignoreAttribute[0].attrName) != _this.ignoreAttribute[0].attrValue;

                  for (var x = 1; x < _this.ignoreAttribute.length; x++) {

                    express = $(this).attr(_this.ignoreAttribute[x].attrName) != _this.ignoreAttribute[x].attrValue && +express;
                  }

                  return express;
                }).text();
              }
              //正则表达式移除指定字符串
              if (_this.removeStrExpression != "") {

                tdText = tdText.replace(_this.removeStrExpression, "");
              }
              RowData.push(tdText);
            }
          }
          dataArray.push(RowData);
        }
        return dataArray;
      },
      outCsv(JSONData) {

        var _this = this;

        var CSV = '';
        //如果JSONData不是一个对象然后JSON.parse将解析对象中的JSON字符串      
        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

        //表头的处理
        if (_this.showHeader) {

          var row = "";

          //自定义表头
          if (_this.tableHeader.length > 0) {

            for (var j = 0; j < _this.tableHeader.length; j++) {

              row += _this.tableHeader[j] + ",";
            }

          } else {

            var trs = $(_this.tableId).find("tr");//#tableObj 为datatable的id

            var tds = $(trs).eq(_this.headerPosition).find("th,td");

            //这个循环将从数组的第一个索引中提取标签。
            for (var j = 0; j < tds.length; j++) {

              //跳过需要忽略的列
              if (_this.ignoredColumns.indexOf(j) >= 0)
                continue;

              var tdText = $(tds).eq(j).text();

              //是否忽略空的列
              if (_this.ignoreEmptyColumns && tdText == "")
                continue;
              row += tdText + ",";
            }
          }

          row = row.slice(0, -1);// 截取对象内的数据。
          CSV += row + '\r\n';// 附加带换行符的标签行 	
        }

        //开始遍历取数据
        for (var i = 0; i < arrData.length; i++) {
          var row = "";
          //第二环路将提取每一列并将其转换成字符串逗号分开
          for (var index in arrData[i]) {
            if (arrData[i][index] instanceof Date) {
              row += '"' + arrData[i][index].toLocaleString() + '",';
            } else {
              row += '"' + arrData[i][index] + '",';
            }
          }
          row.slice(0, row.length - 1);
          CSV += row + '\r\n';
        }
        if (CSV == '') {
          alert("Invalid data");
          return;
        }
        // 定义一个文件名一个文件名
        var fileName = "";
        fileName += _this.fileName.replace(/ /g, "_");
        // if browser is IE
        if (window.navigator.msSaveOrOpenBlob) {
          var csvContent = "\ufeff";
          var uriie = csvContent + CSV;
          var blob = new Blob([decodeURIComponent(encodeURI(uriie))], {
            type: "data:text/csv;charset=utf-8,"
          });
          navigator.msSaveBlob(blob, fileName + '.csv');
        } else {
          var csvContent = "data:text/csv;charset=utf-8,\ufeff";
          var uriother = csvContent + CSV;
          // 第一种实现
          var encodedUri = encodeURI(uriother);
          var link = document.createElement("a");
          link.setAttribute("href", encodedUri);
          link.setAttribute("download", fileName + ".csv");
          document.body.appendChild(link);
          link.click();
        }
      }
    };

    //导出csv
    function exportCsv() {

      exportCsvTool.fileName = (new Date()).getTime().toString();    //下载的文件名字
      exportCsvTool.tableId = "#resultsTable";                       //表单对象
      exportCsvTool.ignoredColumns = [0];                            //忽略第一列
      exportCsvTool.tableHeader = ["Date", "Money", "Name"];          //自定义表头
      exportCsvTool.removeStrExpression = /[,$]/g;                   //移除指定的 , 和 $ 字符 tips:要去掉空格 直接 ' ' 后面加个空格就行了
      exportCsvTool.ignoreEmptyColumns = true;                       //是否忽略空的列
      exportCsvTool.ignoreEmptyRows = true;                          //是否忽略空的行
      //提取文本时需要过滤掉的属性 {attrName:'属性名字',attrValue:'属性值'}
      exportCsvTool.ignoreAttribute = [{ attrName: "class", attrValue: "testcss" }, { attrName: "class", attrValue: "dropdown__body" }, { attrName: "style", attrValue: "display: none;" }];
      exportCsvTool.export();                                        //导出csv
    }
  </script>
</body>

</html>

上面的代码及例子可以完美运行,大多数参数和功能封装都是根据我自己的需求来的,如有bug 请留言指出,不完善之处请谅解,js 小白纯属。目前自己使用暂时未发现有什么问题哈,自己还会继续更新和完善下去。

demo 示例截图:

Jquery CSV 导出工具 ,前端导出csv文件

导出截图:

Jquery CSV 导出工具 ,前端导出csv文件

 

Jquery CSV 导出工具 ,前端导出csv文件