Html Client-side Portable File Generation - No External Resources Or Server Calls

I have the following situation: I have set up a series of Cron jobs on an internal company server to run various PHP scripts designed to check data integrity. Each PHP script queri

Solution 1:

You state in the comments that you "shouldn't NEED to create separate HTML and CSV files," but in this case your fundamental need is to provide data in two formats - originating two copies of the data is not an unreasonable constraint. To repeat, what you're asking for is not feasible.

The closest solution I can imagine to your problem would be to package the CSV data in the HTML file (via a display: none div or similar) and populating it to HTML tables dynamically using JavaScript at loadtime. This is going to be slow if you have large recordsets, but it'd be simple to add a button to show and select the CSV text for copy-paste. Inelegant? Yeah, sorry. There's a reason why HTML isn't an interchange format.

That being said, you could package your tabular data in a PDF and include the CSVs inside it as attachments.

Solution 2:

I want the single HTML file attached to the email to contain all the resources to generate the CSV file. This means I cannot use jQuery

This is a false statement. If you want to use the jQuery functionality in a single HTML file with no server call, simply copy/paste the minified jQuery library into the HTML itself. It will make each HTML file 32K bigger, which is not terrible, unless you're emailing hundreds at a time.

So if you're familiar with jQuery and are comfortable using it to refactor the data on the page, feel free to use it. I'd suggest your auto-created HTML have the data in a javascript array, and upon page load it creates the table(s). Then if the user clicks a CSV option, it can clear and refactor it.

var data = {
  title: 'NameOfTable',
  headers: ['VEN_PK', 'VEN_CompanyName', 'VEN_Order'],
  data: [
    ['1', 'Brander Ranch''Beef'],
    ['2', 'Super Tree Produce''Apples'],
    ['3', 'John\'s Distilery' 'Beer']
  ] 
}
$(document).ready(function() {
  var html = '<table>';
  html += '<thead>';
  html += '<tr><th style="text-align:center;" colspan="' + data.headers.length +'">' + data.title + '</th></tr>';
  html += '</thead><tbody>';
  html += '<tr class="resultheader">';
  for (i in data.headers) {
    html += '<td>'+data.headers[i]+'</td>';
  }
  html += '</tr>';
  for (i in data.data) {
    var row = data.data[i];
    html += '<tr>';
    for (j in row) {
      html += '<td class="resultfield">'+row[j]+'</td>';
    }
    html += '</tr>';
  }
  html += '</table>';
  $('#container').html(html);
});

functionshowCSV() {
   var csv = '';
   for (i in data.headers) {
     csv += data.headers[i] + ',';
   }
   csv += "\n";
   for (i in data.data) {
     var row = data.data[i];
     for (j in row) {
       csv += row[j] + ',';
     }
     csv += "\n";
   }
   $('#container').html(csv);
}