• index.html

  <script src="export_html_table_csv.js"></script>
  
  <div class="auto_table">
      <script>
          if(typeof openNewTargetHtml == "undefined") {
              function openNewTargetHtml(thiss){
                  var html = thiss.parentNode.parentNode.parentNode.parentNode.children[1].firstElementChild.firstElementChild.innerHTML;
                  var newwindow = window.open("", "_blank","");
                  newwindow.document.write(html);
              }
          }
      </script>
      <script>
          if(typeof exportCSV == "undefined") {
              function exportCSV(thiss){
                  var tableObj = thiss.parentNode.parentNode.parentNode.parentNode.children[1].firstElementChild.firstElementChild.firstElementChild;
                  downloadCSV(tableObj,'aa.csv');
              }
          }
      </script>
  
  
      <style>
          tr,td{
              border: 1px solid #9E9E9E;
              text-align: center;
          }
          table>thead>tr>td{
              padding: 10px;
          }
          table>tbody>tr>td{
              border: 1px solid #9E9E9E;
          }
          table>tbody>tr{
              border: 1px solid #9E9E9E;
          }
      </style>
      <script>
          if(typeof openNewTargetHtml == "undefined") {
              function openNewTargetHtml(thiss){
                  var html = thiss.parentNode.parentNode.parentNode.parentNode.children[1].firstElementChild.firstElementChild.innerHTML;
                  var newwindow = window.open("", "_blank","");
                  newwindow.document.write(html);
              }
          }
      </script>
  
      <style>
          tr,td{
              border: 1px solid #9E9E9E;
              text-align: center;
          }
          table>thead>tr>td{
              padding: 10px;
          }
          table>tbody>tr>td{
              border: 1px solid #9E9E9E;
          }
          table>tbody>tr{
              border: 1px solid #9E9E9E;
          }
      </style>
      <table class="MsoNormalTable"  border="0" cellspacing="0" cellpadding="0" style="margin: 10px; padding-left: 50%;border-collapse:collapse;font-size: larger;" ><thead><tr><td>用户访问历史 <font style="color: red;">(9)rows </font> <button type="button" onclick="openNewTargetHtml(this)">新标签页打开</button> <button type="button" onclick="exportCSV(this)">导出CSV</button></td></tr></thead><tbody><tr><td>
  
          <table class="MsoNormalTable"  border="0" cellspacing="0" cellpadding="0" style="margin: 10px; padding-left: 50%;border-collapse:collapse;font-size: larger;" ><thead><tr><td>id</td><td>标""题</td><td>访问时间</td></tr></thead><tbody><tr><td>1333820</td><td>我的\",\"课程</td><td>2020-08-31 21:01:17</td></tr><tr><td>1244314</td><td>如何实现全赢人生 - 奇迹30</td><td>2020-08-29 20:42:20</td></tr><tr><td>1244309</td><td>支付完成</td><td>2020-08-29 20:42:06</td></tr><tr><td>1244305</td><td>支付,订单</td><td>2020-08-29 20:41:55</td></tr><tr><td>1244304</td><td>支付订单</td><td>2020-08-29 20:41:55</td></tr><tr><td>1244299</td><td>如何实现全赢人生 - 奇迹30</td><td>2020-08-29 20:41:41</td></tr><tr><td>1244294</td><td>课程券中心</td><td>2020-08-29 20:41:25</td></tr><tr><td>1243967</td><td>首页</td><td>2020-08-29 20:32:13</td></tr><tr><td>1243960</td><td>奇迹30</td><td>2020-08-29 20:32:07</td></tr></tbody></table></td></tr></tbody></table></div>
  <style>
      table{
          display: inline-table;
      }
  </style>

• export_html_table_csv.js 文件

  if (typeof downloadCSV == "undefined") {
      function downloadCSV(tableid, title) {
          var winname;
          try {
              if (navigator.userAgent.indexOf("MSIE") > 0) { //IE浏览器
                  alert("该功能为兼容 IE浏览器, 请使用谷歌浏览器");
              } else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { //Firefox
                  alert("该功能为兼容 Firefox, 请使用谷歌浏览器");
              } else { //Google Chrome
                  //alert("Google Chrome等浏览器");
                  var str = getTableData(tableid, this);
                  //支持中文
                  var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
                  var downloadLink = document.createElement("a");
                  downloadLink.href = uri;
                  downloadLink.download = title + ".csv";
                  document.body.appendChild(downloadLink);
                  downloadLink.click();
                  document.body.removeChild(downloadLink);
              }
          } catch (e) {
              alert(e.Message);
              return false;
          }
          return false;
      }
  }
  
  if (typeof getTblData == "undefined") {
      // 传入html中的table对象
      function getTableData(curTbl, inWindow) {
          var rows = 0;
          var tblDocument = document;
          tblDocument = eval(inWindow).document;
          // var curTbl = tblDocument.getElementById(inTbl);
          var outStr = "";
          var rowStr = "";
          if (curTbl != null) {
              for (var j = 0; j < curTbl.rows.length; j++) {
                  for (var i = 0; i < curTbl.rows[j].cells.length; i++) {
  
                      if (i == 0 && rows > 0) {
                          outStr += ",";
                          rows -= 1;
                      }
                      rowStr = curTbl.rows[j].cells[i].innerText;
                      if (rowStr.indexOf('"') != -1) {
                          rowStr = rowStr.replace(/"/g, '""');
                          rowStr = '"' + rowStr + '"';
                      } else if (rowStr.indexOf(',') != -1) {
                          rowStr = '"' + rowStr + '"';
                      }
                      outStr += rowStr + ",";
                      if (curTbl.rows[j].cells[i].colSpan > 1) {
                          for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
                              outStr += ",";
                          }
                      }
                      if (i == 0) {
                          if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
                              rows = curTbl.rows[j].cells[i].rowSpan - 1;
                          }
                      }
                  }
                  outStr += "\r\n";//换行
              }
          } else {
              outStr = null;
              alert(allPage.noData);
          }
          return outStr;
      }
  }

让在textarea中按tab符号时输入4个空格, 使用时放于页面末尾即可

HTMLTextAreaElement.prototype.getCaretPosition = function () {
    //return the caret position of the textarea
    return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) {
    //change the caret position of the textarea
    this.selectionStart = position;
    this.selectionEnd = position;
    this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () {
    //if the textarea has selection then return true
    if (this.selectionStart == this.selectionEnd) {
        return false;
    } else {
        return true;
    }
};
HTMLTextAreaElement.prototype.getSelectedText = function () {
    //return the selection text
    return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) {
    //change the selection area of the textarea
    this.selectionStart = start;
    this.selectionEnd = end;
    this.focus();
};
var textarea = document.getElementsByTagName('textarea')[0];
textarea.onkeydown = function (event) {
    //support tab on textarea
    if (event.keyCode == 9) { //tab was pressed
        var newCaretPosition;
        newCaretPosition = textarea.getCaretPosition() + " ".length;
        textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
        textarea.setCaretPosition(newCaretPosition);
        return false;
    }
    if (event.keyCode == 8) {
        //backspace
        if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
            //it's a tab space
            var newCaretPosition;
            newCaretPosition = textarea.getCaretPosition() - 3;
            textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
            textarea.setCaretPosition(newCaretPosition);
        }
    }
    if (event.keyCode == 37) { //left arrow
        var newCaretPosition;
        if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
            //it's a tab space
            newCaretPosition = textarea.getCaretPosition() - 3;
            textarea.setCaretPosition(newCaretPosition);
        }
    }
    if (event.keyCode == 39) {
        //right arrow
        var newCaretPosition;
        if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") {
            //it's a tab space
            newCaretPosition = textarea.getCaretPosition() + 3;
            textarea.setCaretPosition(newCaretPosition);
        }
    }
}