Let us assume we have a webpage which displays contacts from one person's social network , with a contact name anchored to an href , which points to a unique URL for the user's profile .

I scroll down to the bottom of the page and can see several hundred contacts .

Is it possible for me to export all href occurrences to a csv file with this structure from the developer console via JS ?

Col1 : Name Col2 : profile-url

The end result should be a csv file with name and profileUrl only.

Let us assume we have a webpage which displays contacts from one person's social network , with a contact name anchored to an href , which points to a unique URL for the user's profile .

I scroll down to the bottom of the page and can see several hundred contacts .

Is it possible for me to export all href occurrences to a csv file with this structure from the developer console via JS ?

Col1 : Name Col2 : profile-url

The end result should be a csv file with name and profileUrl only.

• javascript
• jquery
• html
• csv

• are you looking for this stackoverflow./questions/7627113/… – Raghvendra Kumar Commented May 20, 2017 at 6:13

5 Answers 5

This solution is based on the following gist.

Edited the snippet below to your desired scenario:

Exported CSV:

Snippet:

$(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./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.">whatever.</a></td>
      </tr>
      <tr>
        <td>Cornell</td>
        <td><a href="http://www.whatever.">whatever2.</a></td>
      </tr>
      <tr>
        <td>Carpet Ride</td>
        <td><a href="http://www.thesky.">sky.</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>

This answer does not need jQuery. It outputs the CSV content to console, which you can save to a file.

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);

Just copy and paste this snippet in the console and let the magic happen:

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();

Probably you will have to alter the selector in querySelectorAll so that it matches only the links you like.

In result a file with the name contacts.csv will be downloaded with content in the format:

name1,link1
name2,link2
...

Yes, you can get the data and download it to a file. In Chrome:

• Open up the developer tools by pressing the f12 key
• Click the "Sources" tab
• There are 3 sub tabs under the "Sources" tab, Sources, Content scripts, Snippets. The "Snippets" tab may be hidden so you'll need to drag the border to the right
• Click the "Snippets" tab
• There will automatically be a new file snippet name if this is the first time you open up the "Snippets" tab. You can right click it to rename it.
• Paste the code into the window that you want to run. Below is my own version.
• Right click the Snippet file name and click "Run"
• For my code, highlight the content in the console log, and right click, and save the file

Example of code you could use:

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 ma from string
//objectAsString = "{" + dataAsString + "}";

console.log(dataAsString)

With the above code, make sure to first click somewhere on the page so that the code will get the active element.

If you know the ID or class name of the containing element with the links, you could modify the code to first get the parent element of the links.

This will work for you

  $("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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>