如何将动态显示的数据从html上的表导出到csv或Excel

Question

我正在尝试在HTML上添加导出按钮，以便在单击时可以导出过滤的数据。例如，如果为表过滤了以A开头的10个名称的名称，我想导出以A开头的前10个名称。

到目前为止，我有一个导出按钮，该按钮可以工作，但只导出整个表，而完全不考虑过滤器。

这是我的HTML

<div class="show-entries">
          <span>Show results</span>
          <select class="form-control" name="limit" id="maxRows">
            <option value="5000 ">Full Table</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
          </select>
        </div>
      </div>
      <object align= right>
      <div class="col-sm-5">
        <div class="filter-group">
          <label>Desired Role</label>
          <select id="mylist" onchange="myFunction()" class="form-control" >
              <option>None</option>
              <option>Assistant</option>
              <option>Associate</option>
              <option>Compliance Officer for Finance and Administration</option>
              <option>Compliance Officer for Legal Practice</option>
              <option>Consultant</option>
              <option>Designated Partner</option>
              <option>Director</option>
              <option>Employee</option>
              <option>In-house Solicitor</option>
              <option>Locum</option>
              <option>Member</option>
              <option>Non-member Partner</option>
              <option>Partner</option>
              <option>Professional Support Lawyer</option>
              <option>Prosecutor</option>
              <option>Role not specified</option>
              <option>SRA-approved manager - Director</option>
              <option>SRA-approved manager - Member</option>
              <option>SRA-approved manager - Partner</option>
              <option>SRA-approved manager - Sole Practitioner</option>
          </select>
        </div>
      </div>
    </object>
    </div>
    </div>
    <div id="hi">
        <table id="tlaw" class="table table-striped">
            <thead>
              <tr>
                  <th>Solicitor</th>
                  <th>Office</th>
                  <th>Address</th>
                  <th>Primary_Role</th>
                  <th>Secondary_Role</th>
                  <th>Other_Role</th>
                  <th>Other_Role_1</th>
              </tr>
            </thead>
            <tbody id="tls_table">
              {% block content %}

              {% endblock %}
            </tbody>
          </table>
        </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button><a href="#" type="button" class="export">Export Table data into Excel</a></button>

JS代码

<script>
      $(document).ready(function() {

  function exportTableToCSV($table, filename) {

    var $rows = $table.find('tr:has(td)'),


      tmpColDelim = String.fromCharCode(11), // vertical tab character
      tmpRowDelim = String.fromCharCode(0), // null character

      // actual delimiter characters for CSV format
      colDelim = '","',
      rowDelim = '"\r\n"',


      csv = '"' + $rows.map(function(i, row) {
        var $row = $(row),
          $cols = $row.find('td');

        return $cols.map(function(j, col) {
          var $col = $(col),
            text = $col.text();

          return text.replace(/"/g, '""'); 

        }).get().join(tmpColDelim);

      }).get().join(tmpRowDelim)
      .split(tmpRowDelim).join(rowDelim)
      .split(tmpColDelim).join(colDelim) + '"';


    if (false && window.navigator.msSaveBlob) {

      var blob = new Blob([decodeURIComponent(csv)], {
        type: 'text/csv;charset=utf8'
      });


      window.navigator.msSaveBlob(blob, filename);

    } else if (window.Blob && window.URL) {
      // HTML5 Blob        
      var blob = new Blob([csv], {
        type: 'text/csv;charset=utf-8'
      });
      var csvUrl = URL.createObjectURL(blob);

      $(this)
        .attr({
          'download': filename,
          'href': csvUrl
        });
    } else {

      var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

      $(this)
        .attr({
          'download': filename,
          'href': csvData,
          'target': '_blank'
        });
    }
  }


  $(".export").on('click', function(event) {
    // CSV
    var args = [$('#hi>table'), 'export.csv'];

    exportTableToCSV.apply(this, args);


  });
  });
  </script>

<script>
    function myFunction() {
        var input, filter, table, tr, td, cell, i, j;
        input = document.getElementById("mylist");
        filter = input.value.toUpperCase();
        table = document.getElementById("tlaw");
        tr = table.getElementsByTagName("tr");
        for (i = 1; i < tr.length; i++) {

          tr[i].style.display = "none";

          td = tr[i].getElementsByTagName("td");
          for (var j = 0; j < td.length; j++) {
            cell = tr[i].getElementsByTagName("td")[j];
            if (cell) {
              if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
                break;
              } 
            }
          }
        }
      }
</script>```