Develop Reference

Download HTML table to Excel by using Javascript

In my Flask application, I created a button to extract the content of an HTML table into an Excel file. I used Javascript to extract from my interface the content of my HTML table in Excel format.
Unfortunately, when I run the code below, the downloaded Excel file is empty. Could you please help to correct my code below. Thanks.
function exportTableToExcel(filename = ''){
let downloadLink;
let dataType = 'application/vnd.ms-excel';
let tableSelect = document.getElementsByTagName("table");
let tableHTML = tableSelect[0].outerHTML.replace(/ /g, '%20');
// Specify file name
filename = 'All_Issues.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}

The getElementsByTagName() function returns an array so you have to get the first element.
let tableHTML = tableSelect[0].outerHTML.replace(/ /g, '%20');

how to overwrite data in html table and export this data to existed excel file

I want to know how to export data in html table to existed excel file. I have found ways to export data to new excel file but what I want is to export this data to an existed excel file.
The code I found to export to new file but again I want to append this data to excel file that I already have.
code:
<script type="text/javascript">
function exportTableToExcel(tableID, filename = 'scenario'){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}

Javascript working on chrome but not on IE-11

So I found a function that exports an html table into csv using javascript. For some reason it works perfectly on chrome but not on internet explorer v11.
Any help would be appreciated!
function exportTableToExcel(tableID, filename = ''){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}}

Set the file name and open blob word type

I am trying to download word document, it is working but i am not how to set file name. Every time it is downloading with some unique name.
this.downloadData("downloadVehicleLine").subscribe(
data => {
this.downLoadFile(data);
})
downLoadFile(data: any) {
var blob = new Blob([data], { type: 'application/octet-stream' });
var url = window.URL.createObjectURL(blob);
var pwa = window.open(url, "createdocument.docx");
if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
alert('Please disable your Pop-up blocker and try again.');
}
}
It should download word document with the name createdocument.docx

I think you can use an anchor element reference instead of window.URL; because you can set the name of the file to download property of the element.
You can use this code to download files:
var blob = new Blob([data], { type: 'application/octet-stream' });
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
// set the name of the file
link.download = "createdocument.docx";
// clicking the anchor element will download the file
link.click();

javascript download csv data in Safari

Is there anyway to download a csv string that I have created in my javascript in Safari?
EDIT: I do not want to (cannot) create a file on the server.
I have the following code, it will work fine on other browsers, but not on safari. The best that I can seem to make it do is open the data in a new window, but that is an awful UI experience for the user.
$("#csv").click(function(event) {
event.preventDefault();
navigator.sayswho = (function() {
var ua = navigator.userAgent, tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
return M[1];
})();
var download = function (content, fileName, mimeType) {
var a = document.createElement('a');
mimeType = mimeType || 'application/octet-stream';
mimeType = 'application/octet-stream';
if (navigator.msSaveBlob) { // IE10
return navigator.msSaveBlob(new Blob([content], {
type: mimeType
}), fileName);
} else if ('download' in a) { //html5 A[download]
a.href = 'data:' + mimeType + ',' + encodeURIComponent(content);
a.setAttribute('download', fileName);
document.body.appendChild(a);
setTimeout(function () {
a.click();
document.body.removeChild(a);
}, 66);
return true;
} else { //do iframe dataURL download (old ch+FF):
if (navigator.sayswho == 'Safari') {
var uri = 'data:text/csv;charset=utf-8,' + escape(content);
var link = document.createElement("a");
link.href = uri;
link.target = "_blank";
link.style = "visibility: hidden";
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
else
{
var f = document.createElement('iframe');
document.body.appendChild(f);
f.src = 'data:' + mimeType + ',' + encodeURIComponent(content);
setTimeout(function () {
document.body.removeChild(f);
}, 33333);
return true;
}
}
}
//csv_content is my string that has the csv data in it.
download(csv_content, moment().format("YYYY_MM_DD_HH_mm") + '.csv', 'text/csv');
});
In Chrome and in FireFox, it works as expected. I saw some answers using FileSaver.js (https://stackoverflow.com/a/14858315/1758023), but the comments say this is not working (and I couln't make it work either).

Try using the following js function.
function download()
{
window.location = '<<your file name with full path>>';
//for ex. function download()
//window.location = 'mobilepayreport.xls';
}

I also had the issue in safari.You can create and download the csv file in safari.But until your file is not physically stored on any location it does not show the file name and type in download popup(it always shows unknown).So I suggest pass the data as html in server side code using ajax and create a file and and with response of that call create the link of file which you stored from server side code.download the file and then you can delete this file.