javascript - 从 Chrome 开发控制台将所有 anchor 标记引用导出到格式化的 CSV 文件

Question

假设我们有一个网页显示来自一个人的社交网络的联系人，联系人姓名锚定到 href，指向用户个人资料的唯一 URL。

我向下滚动到页面底部，可以看到数百个联系人。

我是否可以通过 JS 从开发人员控制台将所有 href 事件导出到具有此结构的 csv 文件？

第 1 列:名称 Col2 : 个人资料网址

最终结果应该是一个只有 name 和 profileUrl 的 csv 文件。

Answer 1

此解决方案基于以下 gist .

将下面的代码片段编辑为您想要的场景:

导出的 CSV:

片段:

$(document).ready(function() {
  function exportTableToCSV($table, filename) {
    var $headers = $table.find('tr:has(th)'),
      $rows = $table.find('tr:has(td)')
      // Temporary delimiter characters unlikely to be typed by keyboard
      // This is to avoid accidentally splitting the actual contents
      ,
      tmpColDelim = String.fromCharCode(11) // vertical tab character
      ,
      tmpRowDelim = String.fromCharCode(0) // null character
      // actual delimiter characters for CSV format
      ,
      colDelim = '","',
      rowDelim = '"\r\n"';
    // Grab text from table into CSV formatted string
    var csv = '"';
    csv += formatRows($headers.map(grabRow));
    csv += rowDelim;
    csv += formatRows($rows.map(grabRow)) + '"';
    // Data URI
    var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
    $(this)
      .attr({
        'download': filename,
        'href': csvData
        //,'target' : '_blank' //if you want it to open in a new window
      });
    //------------------------------------------------------------
    // Helper Functions 
    //------------------------------------------------------------
    // Format the output so it has the appropriate delimiters
    function formatRows(rows) {
      return rows.get().join(tmpRowDelim)
        .split(tmpRowDelim).join(rowDelim)
        .split(tmpColDelim).join(colDelim);
    }
    // Grab and format a row from the table
    function grabRow(i, row) {

      var $row = $(row);
      //for some reason $cols = $row.find('td') || $row.find('th') won't work...
      var $cols = $row.find('td');
      if (!$cols.length) $cols = $row.find('th');
      return $cols.map(grabCol)
        .get().join(tmpColDelim);
    }
    // Grab and format a column from the table 
    function grabCol(j, col) {
      var $col = $(col),
        $text = $col.text();
      return $text.replace('"', '""'); // escape double quotes
    }
  }
  // This must be a hyperlink
  $("#export").click(function(event) {
    // var outputFile = 'export'
    var outputFile = window.prompt("What do you want to name your output file (Note: This won't have any effect on Safari)") || 'export';
    outputFile = outputFile.replace('.csv', '') + '.csv'

    // CSV
    exportTableToCSV.apply(this, [$('#dvData>table'), outputFile]);

    // IF CSV, don't do event.preventDefault() or return false
    // We actually need this to be a typical hyperlink
  });
});

body {
  font-family: sans-serif;
  font-weight: 300;
  padding-top: 30px;
  color: #666;
}

.container {
  text-align: center;
}

a {
  color: #1C2045;
  font-weight: 350;
}

table {
  font-weight: 300;
  margin: 0px auto;
  border: 1px solid #1C2045;
  padding: 5px;
  color: #666;
}

th,
td {
  border-bottom: 1px solid #dddddd;
  text-align: center;
  margin: 10px;
  padding: 0 10px;
}

.button {
  padding: 5px 20px;
  max-width: 215px;
  line-height: 1.5em;
  text-align: center;
  margin: 5px auto;
  border-radius: 5px;
  border: 1px solid midnightblue;
}

.button a {
  color: midnightblue;
  text-decoration: none;
}

.button a:hover {
  font-weight: 500;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='container'>
  <div id="dvData">
    <table>
      <tr>
        <th>Name</th>
        <th>Profile URL</th>
      </tr>
      <tr>
        <td>Chris</td>
        <td><a href="http://www.whatever.com">whatever.com</a></td>
      </tr>
      <tr>
        <td>Cornell</td>
        <td><a href="http://www.whatever.com">whatever2.com</a></td>
      </tr>
      <tr>
        <td>Carpet Ride</td>
        <td><a href="http://www.thesky.com">sky.com</a></td>
      </tr>
    </table>
  </div>
  <br/>
  <div class='button'>
    <a href="#" id="export" role="button">Click this text to export Table Data into a CSV File</a>
  </div>
</div>