Экспорт всех ссылок привязки тегов в форматированный CSV файл из консоли Chrome dev

Ответ 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>

Ответ 2

Этот ответ не нужен jQuery. Он выводит содержимое CSV на консоль, которую вы можете сохранить в файле.

var csv='Name,profile-url\r\n';

var aElements = document.getElementsByTagName('a');

for (var i = 0; i < aElements.length; i++) {
  var anchor = aElements[i];
  csv += anchor.text.trim() + ',' + anchor.href + '\r\n';
}
console.log(csv);

Ответ 3

Просто скопируйте и вставьте этот фрагмент в консоль и дайте волшебство:

Object.assign(document.createElement("a"), {
    download: 'contacts.csv', 
    href: URL.createObjectURL(new Blob([
        ([]).slice
            .call(document.querySelectorAll('a'), 0)
            .map(e => e.textContent.trim() + ',' + encodeURIComponent(e.href))
            .join('\n')
    ], {type: 'text/plain'}))
}).click();

Вероятно, вам нужно будет изменить селектор в querySelectorAll, чтобы он соответствовал только тем ссылкам, которые вам нравятся.

В результате файл с именем contacts.csv будет загружен с содержимым в формате:

name1,link1
name2,link2
...

Ответ 4

Да, вы можете получить данные и загрузить их в файл. В Chrome:

• Откройте инструменты разработчика, нажав клавишу f12
• Перейдите на вкладку "Источники" .
• На вкладке "Источники" , "Источники" , "Контент-скрипты", "Отрывки" есть 3 вкладки. Вкладка "Snippets" может быть скрыта, поэтому вам нужно перетащить границу вправо.
• Перейдите на вкладку "Отрывки"
• Будет автоматически добавлено новое имя фрагмента файла, если это первый раз, когда вы открываете вкладку "Snippets". Вы можете щелкнуть его правой кнопкой мыши, чтобы переименовать его.
• Вставьте код в окно, которое вы хотите запустить. Ниже приведена моя собственная версия.
• Щелкните правой кнопкой мыши имя файла Snippet и нажмите "Запустить"
• Для моего кода выделите содержимое в журнале консоли и щелкните правой кнопкой мыши и сохраните файл

Пример кода, который вы могли бы использовать:

var activeElmt,allLinkTags,dataAsString,i,L,
    objectAsString,parerunt,thisBody,thisLinkTag;

activeElmt = document.activeElement;//Get the active element - click somewhere

currentEl = activeElmt;//Set current element to active Element

for (i=0;i<7;i++) {//Loop 7 times or less to traverse up to BODY tag of this page
  //This trying to make sure that the currently displayed HTML content is being used
  //to get the desired elements

  parerunt = currentEl.parentElement;

  if (!parerunt) break;
  //console.log('parerunt.tagName: ' + parerunt.tagName)    

  if (parerunt.tagName === "BODY") {
    thisBody = parerunt;
    break;
  }

  currentEl = parerunt;
}

//console.log('thisBody: ' + thisBody)
//console.log('thisBody ID: ' + thisBody.id)

allLinkTags = thisBody.getElementsByTagName('a');
L = allLinkTags.length;

dataAsString = "";

for (i=0;i<L;i++) {
  thisLinkTag = allLinkTags[i];
  //console.log('thisLinkTag.textContent: ' + thisLinkTag.textContent)
  //console.log('thisLinkTag.href: ' + thisLinkTag.href)

  dataAsString = dataAsString + "Col1:" + thisLinkTag.text + ",Col2:" + 
    thisLinkTag.href + ",";
}

dataAsString = dataAsString.slice(0,-1);//Remove last comma from string
//objectAsString = "{" + dataAsString + "}";

console.log(dataAsString)

С приведенным выше кодом обязательно сначала нажмите на страницу, чтобы код получил активный элемент.

Если вы знаете идентификатор или имя класса содержащего элемента со ссылками, вы можете изменить код, чтобы сначала получить родительский элемент ссылок.

Ответ 5

Это будет работать для вас

  $("body").append(
        "<a id='downloadFile' href='#' style='color:white;background:red;bottom:0;right:0;position:fixed;z-index:9999'>Download FIle</a>"
    ); 
    $(document).ready(function () {
        function exportTableToCSV(filename) {
            var aElements = document.getElementsByTagName('a');
            var csv = 'Name,profile-url\r\n';
            for (var i = 0; i < aElements.length; i++) {
                var anchor = aElements[i];
                csv += anchor.text.trim() + ',' + anchor.href + '\r\n';
            }

            alert(csv);
            // 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
                });

        }
        // This must be a hyperlink
        $("#downloadFile").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, [outputFile]);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>