Export HTML table to CSV in spreadsheet
I am making an e-application (using Node Js) where I need to export HTML table data to a CSV file. I followed this tutorial to implement this. The function used is as follows.
$(document).ready(function () {
function exportTableToCSV($table, filename) {
var $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
csv = '"' + $rows.map(function (i, row) {
var $row = $(row),
$cols = $row.find('td');
return $cols.map(function (j, col) {
var $col = $(col),
text = $col.text();
return text.replace(/"/g, '""'); // escape double quotes
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"';
// Deliberate 'false', see comment below
if (false && window.navigator.msSaveBlob) {
var blob = new Blob([decodeURIComponent(csv)], {
type: 'text/csv;charset=utf8'
});
window.navigator.msSaveBlob(blob, filename);
} else if (window.Blob && window.URL) {
// HTML5 Blob
var blob = new Blob([csv], { type: 'text/csv;charset=utf8' });
var csvUrl = URL.createObjectURL(blob);
$(this).attr({
'download': filename,
'href': csvUrl
});
} else {
// Data URI
var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this).attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
}
// This must be a hyperlink
$(".export").on('click', function (event) {
// CSV
var args = [$('#dvData>table'), 'export.csv'];
exportTableToCSV.apply(this, args);
// If CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
});
});
I gave the default name "export.csv" for the output csv file.
The problem I am facing is as follows.
When I run this electronic app on Windows (I used electron-packager to package it, Ubuntu is my main computer),
In the resulting Windows dialog box asking where to save the document
If I do not change the default name "export.csv" present in the "File name" field, I get the file export.csv as the output file. Screenshot is below for reference
But if I change the name that exists in the Filename field to a different name (ex: temp), I don't get the CSV file. Instead, I end up with a file as shown in the image below.
Can someone please tell me how can I get a valid .csv file as my output file even if the user changes the "Filename" output?
source to share
You have not provided the code you are using to display the Windows dialog, but I think the simplest thing is to make it the default extension .csv
.
You can do this by setting filters
in your call to showSaveDialog
.
For example:
var filename = dialog.showSaveDialog({
filters: [
{ name: 'CSV files', extensions: ['csv'] }
]
});
Thus, when the user enters their own filename, the result will default to the extension .csv
.
source to share