Develop Reference

download kml file throuth tag <a>,browser not handle mimeType 'application/vnd.google-earth.kml+xml'

when i use a tag for downloading kml file, browser doesn't recognize right extension.
then i try mimetype https://www.iana.org/assignments/media-types/media-types.xhtml,
some works some doesn't.i use Chrome for the test.
any one can help? thanks...
let url = URL.createObjectURL(
new Blob([string format kml data], { type: 'application/vnd.google-earth.kml+xml' })
)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'filename')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)

Javascript: How to download csv file from a url

I have a url which has csv file. i want to download that file by JavaScript. during download i will provide file name and by that name file will be download in client pc. i tried below code which is not working. where i made the mistake. please give me hint.
function downloadFile(fileName, urlData) {
var aLink = document.createElement('a');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click");
aLink.download = fileName;
aLink.href = urlData;
aLink.dispatchEvent(evt);
}
downloadFile('Test.csv', 'https://testsite.com/targeting/Export/aa.csv');

Use
aLink.click();
instead of the Dispatch-event

I found code which worked. here is the code which i am following now.
var url = 'https://testsite.com/targeting/Export/aa.csv';
var a = document.createElement("a");
a.href = url;
fileName = url.split("/").pop();
alert(fileName);
a.download = fileName;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
a.remove();

JS download file from the server does not working

I am getting from my server a png file. The response looks like this:
�PNG
IHDR|�<V� IDATx���w�T����ם^����I�
v[$��J��bL����oL�&єob���K��QEQ���RDzoK���˽�?f�Sd��ǃ���s���;�����s�����������������-��#DDDDDDDDDDDD�
When I'm trying to convert it to a blob and download it, the file is empty.
download() {
return this.http.get(url).map(res => this.downloadFile(res.text()));
}
private downloadFile(data) {
const blob = new Blob([data], {type: 'image/png'});
const url = window.URL.createObjectURL(blob);
return url;
}
this.download(this.config.guid).subscribe(url => {
var link = document.createElement("a");
link.href = url;
link.download = "data.png";
document.body.appendChild(link);
link.click();
});
What am I doing wrong?

If you don't need to support IE11, fetch makes it easy to get a Blob for a downloaded resource:
fetch(url).then(response => response.blob()).then(blob => {
// Use the blob here...
const blobUrl = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = blobUrl;
link.download = "data.png";
document.body.appendChild(link);
link.click();
});
That said: I would just make the link an actual link and return the data with the Content-Disposition header set to attachment; filename=data.png. The browser will offer to save the file when the user clicks the link.

PDF Blob not saving with content

I have this code:
$.post('/pdf/render', params, function (data) {
var blob = new Blob([data], {type: 'application/pdf'});
var downloadUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = downloadUrl;
a.download = "results.pdf";
document.body.appendChild(a);
a.click();
}):
Once my PDF downloads, the clicked URL and blob saves my PDF with the correcct number of pages, but there is nothing in the PDF. Am I doing something wrong with my blob? Why would there be no content when I am getting the content from the backend?
For clairfication, I checked with cURL and got a proper PDF with content.

Angular save file as csv result in Failed- network error Only on Chrome

I'm using the following code to save file as csv.
$scope.saveCSVFile = function (result)
{
var a = document.createElement('a');
a.href = 'data:application/csv;charset=utf-8,' + encodeURIComponent(result.data);
a.target = '_blank';
a.download = $scope.getFileNameFromHttpResponse(result);
document.body.appendChild(a);
a.click();
$scope.isReportInProgress = false;
};
The file is working on most of the cases but for some reason when the file is larger than 10MB i get "Failed - Network Error".
It happens only on chrome.
I tried to search the web for this issue and couldn't find anything relevant.
Can you think of an idea why does it happens? or maybe use a different save file method that will work on chrome/firefox/IE instead of my function?

I was finally used this one, hope it can help the next one encounter this issue:
var blob = new Blob([result.data], {type: 'text/csv'});
var filename = $scope.getFileNameFromHttpResponse(result);
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}

I had a similar problem, but had to serve a zip file, sent from the server in base64 format. What did the trick for me:
function downloadBlob(data, filename) {
const blob = new Blob([new Buffer(data, 'base64')], {type: 'application/octet-stream'});
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
const elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
window.URL.revokeObjectURL(elem.href);
document.body.removeChild(elem);
}
}
return (
{/* ... */}
<a href="#" onClick={() => {downloadBlob(report.zip, `${report.filename}.zip`)}}>
Download <b>{report.filename}.zip</b>
</a>
{/* ... */}
);
I left the function because like the fact that it revokes the URL after serving the file.