How to save specific HTML attribute values to csv file?

Question

it's my first post here so be gentle. :)

My script is supposed to open the forum page, fill in login/pass fields, submit the form and save specific data from the newly opened page (list of users, emails, etc.) Once I submit form, I need to wait about 5-10s, so my timeout is pretty big. I give a great credit to Vijay, because I started off from his answer in this post: How to submit a form using PhantomJS

Just for testing purposes I console.log website content twice: once before loging in and once after. It also works.

HTML content of the list of users consists of many elements. One of them looks like ( trimmed all styling, classes etc):

<tr>
  <td class="gen" align="center">
    <a href="mailto:smith@gmail.com">[code for img]</a>
  </td>
  <td class="gen" align="center">
    <a href="www.website.com">[code for img]</a>
  </td>
  //many tds
</tr>

TDs and TRs have no ID or name property. There are several columns, but I want to save to csv just few of them (if it's impossible because of no field IDs, I may save everything to csv, but it's less desireable solution). I would like to somehow identify needed data by looking for 'mailto' and then save just 'smith@gmail.com' to the file.

I have no clue how to not only save it to csv, but also let the script know what data should get to which cell in the spreadsheet.

Code:

var page = require('webpage').create();
var fs = require('fs');
var testindex = 0, loadInProgress = false;

page.onConsoleMessage = function(msg) {
  console.log(msg);
};
page.onLoadStarted = function() {
  loadInProgress = true;
  console.log("load started");
};
page.onLoadFinished = function() {
  loadInProgress = false;
  console.log("load finished");
};

var steps = [
  function() {
    //Load Login Page
   page.open("http://www.website.com/memberlist.php");
  },
  function() {
    //Enter Credentials
    page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js",   function() {
        page.evaluate(function() {
            $("input[name='username']").val("login");   
            $("input[name='password']").val("password");
            $("input[value='Log in']").click();
            console.log("form filled in"); //works
        });

    var markup = page.content;
    console.log(markup);
    page.render("form filled.png"); //works
});
  }, 
  function() {
    // Output content of page to stdout after form has been submitted
    page.evaluate(function() {
    var record = document.querySelectorAll("tr.row1");   //input.row1, input.row2
    //console.log(inputs.length);
    for (i=0; i < record.length; i++){
    console.log(document.querySelectorAll('tr.row1')[i].outerHTML);
} 
});
  }
];

interval = setInterval(function() {
  if (!loadInProgress && typeof steps[testindex] == "function") {
    console.log("step " + (testindex + 1));
    steps[testindex]();
    testindex++;
  }
  if (typeof steps[testindex] != "function") {
    console.log("test complete!");
    page.render('export.png'); //works. it's a screenshoot in a newly opened webpage   already after succesful log in.
    phantom.exit();
  }
}, 10000);

score 0 · Accepted Answer · edited May 23 '17 at 10:26

You can create a string representing the csv file contents, and then use a data URI (per this SO question) to allow it to be downloaded.

To get the csv representation of a table:

function tableToCSV(tabID) {
   var csvLines = [];
   var tabEl = document.getElementById('tabID');
   var rows = tabEl.getElementsByTagName('tr');
   for(var row = 0; row < rows.length; ++row) {
      var cells = rows[row].getElementsByTagName('td');
      var rowValues = [];
      for(var cell = 0; cell < cells.length; ++cell) {
         var cellText = cells[cell].innerText;
         // could escape commas here
         rowValues.push(cellText);
      }
      csvLines.push(rowValues.join(','));
   }
   return csvLines.join("\n");
}

How to save specific HTML attribute values to csv file?

1 Answers1