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 queries a company database, formats the returned query data into an HTML file containing one or more <tables>, and then mails the HTML file
to several client emails as an attachment. From my experience, most of the PHP scripts generate HTML files with only a few tables, however there are a few PHP scripts the create HTML files with around 30 tables. HTML files have been chosen as the distribution format of these scans because HTML makes it easy
to view many tables at once in a browser window.
I would like
to add the functionality for the clients
to download a table in the HTML file as a CSV file. I anticipate clients using this feature when they suspect a data integrity issue based on the table data. It would be ideal for them
to be able
to take the table in question,
export the data out
to a CSV file, and then study it further.
Because need for exporting the data
to CSV format is at the discretion of the client, unpredictable as
to what table will be under scrutiny, and intermittently used I do not want
to create CSV files for every table.
Normally creating a CSV file wouldn't be too difficult, using JavaScript/jQuery
to preform DOM traversal and generate the CSV file data into a string utilizing a server call or flash library
to facilitate the download process; but I have one limiting constraint: The HTML file needs
to be "portable."
I would like the clients
to be able
to take their HTML file and preform analysis of the data outside the company intranet. Also it is likely these HTML files will be archived, so making the
export functionality "self contained" in the HTML files is a highly desirable feature for the two previous reasons.
The "portable" constraint of CSV file generation from a HTML file means:
I cannot make a server call. This means ALL the file generation must be done client-side.
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 or flash libraries
to generate the file.
I understand, for obvious security reasons, that writing out files
to disk using JavaScript isn't supported by any browser. I don't want
to create a file without the user knowledge; I would like
to generate the file using JavaScript in memory and then prompt the user the "download" the file from memory.
I have looked into generating the CSV file as a URI however, according
to my research and testing, this approach has a few problems:
URIs for files are not supported by IE (See Here)
URIs in FireFox saves the file with a random file name and as a .part file
As much as it pains me, I can accept the fact the IE<=v9 won't create a URI for files. I would like
to create a semi-cross-browser solution in which Chrome, Firefox, and Safari create a URI
to download the CSV file after JavaScript DOM traversal compiles the data.
My Example Table:
<table>
<thead class="resulttitle">
<tr>
<th style="text-align:center;" colspan="3">
NameOfTheTable</th>
</tr>
</thead>
<tbody>
<tr class="resultheader">
<td>VEN_PK</td>
<td>VEN_CompanyName</td>
<td>VEN_Order</td>
</tr>
<tr>
<td class='resultfield'>1</td>
<td class='resultfield'>Brander Ranch</td>
<td class='resultfield'>Beef</td>
</tr>
<tr>
<td class='resultfield'>2</td>
<td class='resultfield'>Super Tree Produce</td>
<td class='resultfield'>Apples</td>
</tr>
<tr>
<td class='resultfield'>3</td>
<td class='resultfield'>John's Distilery</td>
<td class='resultfield'>Beer</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align:right;">
<button onclick="doSomething(this);">Export
to CSV File</button></td>
</tr>
</tfoot>
</table>
My Example JavaScript:
<script type="text/javascript">
function doSomething(inButton) {
/* locate elements */
var table = inButton.parentNode.parentNode.parentNode.parentNode;
var name = table.rows[0].cells[0].textContent;
var tbody = table.tBodies[0];
/* create CSV String through DOM traversal */
var rows = tbody.rows;
var csvStr = "";
for (var i=0; i < rows.length; i++) {
for (var j=0; j < rows[i].cells.length; j++) {
csvStr += rows[i].cells[j].textContent +",";
}
csvStr += "\n";
}
/* temporary proof DOM traversal was successful */
alert("Table Name:\t" + name + "\nCSV String:\n" + csvStr);
/* Create URI Here!
* (code I am missing)
*/
/* Approach 1 : Auto-download
* downloads CSV data but:
* In FireFox downloads as randomCharacers.part instead of name.csv
* In Chrome downloads without prompting the user
* In Safari opens the files in browser (textfile)
*/
//var hrefData = "data:text/csv;charset=US-ASCII," + encodeURIComponent(csvStr);
//document.location.href = hrefData;
/* Approach 2 : Right-Click Save As...
*/
var hrefData = "data:text/csv;charset=US-ASCII," + encodeURIComponent(csvStr);
var fileLink = document.createElement("a");
fileLink.href = hrefData;
fileLink.innerHTML = "download";
parentTD = inButton.parentNode;
parentTD.appendChild(fileLink);
parentTD.removeChild(inButton);
}
</script>
I am looking for an example solution in which the above example table can be downloaded as a CSV file:
using a URI
the user is prompted
to save the file
the default filename is the name of the table.
code works as described in modern versions of FireFox, Safari, & Chrome
I have added a <script> tag with the DOM traversal function doSomething(). The real help I need is with formatting the URI
to what I want within the doSomething() function.
