Javascript: How to download csv file from a url - javascript

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();

Related

Downloading Json FIle using javascript

This is my json data that I currently get when i convert a xml file:
{"mxGraphModel":{"root":{"mxCell":[{"_id":"0"},{"_id":"1","_parent":"0"},{"mxGeometry":{"_x":"200","_y":"100","_width":"100","_height":"100","_as":"geometry"},"_id":"2","_style":"shape=ellipse","_vertex":"1","_parent":"1"},{"mxGeometry":{"_x":"520","_y":"250","_width":"100","_height":"100","_as":"geometry"},"_id":"3","_style":"shape=triangle","_vertex":"1","_parent":"1"},{"mxGeometry":{"_x":"900","_y":"460","_width":"100","_height":"100","_as":"geometry"},"_id":"4","_style":"shape=cylinder","_vertex":"1","_parent":"1"},{"mxGeometry":{"_x":"310","_y":"450","_width":"100","_height":"100","_as":"geometry"},"_id":"5","_style":"shape=actor","_vertex":"1","_parent":"1"},{"mxGeometry":{"_relative":"1","_as":"geometry"},"_id":"6","_edge":"1","_parent":"1","_source":"2","_target":"3"},{"mxGeometry":{"_relative":"1","_as":"geometry"},"_id":"7","_edge":"1","_parent":"1","_source":"5","_target":"3"},{"mxGeometry":{"_relative":"1","_as":"geometry"},"_id":"8","_edge":"1","_parent":"1","_source":"3","_target":"4"}]}}}
But when I download the same data as .json, I get this:
"{\"mxGraphModel\":{\"root\":{\"mxCell\":[{\"_id\":\"0\"},{\"_id\":\"1\",\"_parent\":\"0\"},{\"mxGeometry\":{\"_x\":\"200\",\"_y\":\"100\",\"_width\":\"100\",\"_height\":\"100\",\"_as\":\"geometry\"},\"_id\":\"2\",\"_style\":\"shape=ellipse\",\"_vertex\":\"1\",\"_parent\":\"1\"},{\"mxGeometry\":{\"_x\":\"520\",\"_y\":\"250\",\"_width\":\"100\",\"_height\":\"100\",\"_as\":\"geometry\"},\"_id\":\"3\",\"_style\":\"shape=triangle\",\"_vertex\":\"1\",\"_parent\":\"1\"},{\"mxGeometry\":{\"_x\":\"900\",\"_y\":\"460\",\"_width\":\"100\",\"_height\":\"100\",\"_as\":\"geometry\"},\"_id\":\"4\",\"_style\":\"shape=cylinder\",\"_vertex\":\"1\",\"_parent\":\"1\"},{\"mxGeometry\":{\"_x\":\"310\",\"_y\":\"450\",\"_width\":\"100\",\"_height\":\"100\",\"_as\":\"geometry\"},\"_id\":\"5\",\"_style\":\"shape=actor\",\"_vertex\":\"1\",\"_parent\":\"1\"},{\"mxGeometry\":{\"_relative\":\"1\",\"_as\":\"geometry\"},\"_id\":\"6\",\"_edge\":\"1\",\"_parent\":\"1\",\"_source\":\"2\",\"_target\":\"3\"},{\"mxGeometry\":{\"_relative\":\"1\",\"_as\":\"geometry\"},\"_id\":\"7\",\"_edge\":\"1\",\"_parent\":\"1\",\"_source\":\"5\",\"_target\":\"3\"},{\"mxGeometry\":{\"_relative\":\"1\",\"_as\":\"geometry\"},\"_id\":\"8\",\"_edge\":\"1\",\"_parent\":\"1\",\"_source\":\"3\",\"_target\":\"4\"}]}}}"
I find that there are unwanted "\" characters in the downloaded version. The code i use to download the data is:
function download(jFile) {
var text = jFile;
var result = "data:application/json," + encodeURI(text);
var a = document.createElement("a");
a.style = "display: none";
a.href = result;
a.download = "flowChartJson.json";
if (window.navigator.msSaveBlob !== undefined) {
window.navigator.msSaveBlob(blob, a.download);
window.URL.revokeObjectURL(result);
return;
}
document.body.appendChild(a);
requestAnimationFrame(function() {
a.click();
window.URL.revokeObjectURL(result);
document.body.removeChild(a);
});
}
Where am I going wrong?
Thanks in advance for your help.

JAVASCRIPT: EDGE change extension of file download

I have a problems with Microsoft Edge: when I do the download edge changes the extension of the file that I just have downloaded. With Chrome and Firefox I don't have this problems... I attach the code that I use:
a = document.createElement('a');
a.href = "name.xxx";
a.target = '_blank';
a.download = "name.xxx";
a.type = ".icd";
document.body.appendChild(a);
a.click();
a.remove();
The structure of the file is an XML file, but it has his extension.
Can you help me??

I don't know if I'm late, but this is a solution that works, I had the same error and I was able to solve it.
var blob = new window.Blob([data], { type: 'application/pdf' });
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = url.substring(url.lastIndexOf('/') + 1);
a.href = url;
a.download = filename + '.pdf' || 'download';
document.body.append(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);

how to generate html and css file dynamically using javascript for download by the user from string?

I have a css code and html code in a string and want to create a .html and .css file for download. Is it actually possible?
I've used this example but it prints all code exactly as string and not as real css/html code
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
http://jsfiddle.net/koldev/cW7W5/

Wow ok, I found the solution. Just remove first and last quotations. tada...
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var parsed = data.replace(/^['"].*['"]+/g, ''),
blob = new Blob([parsed], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
http://jsfiddle.net/cW7W5/1356/

Download the source code in html of a form generated with angularjs

Is it possible by angularjs download a piece of code generated by a form?
Add a simple code:
http://jsbin.com/nufixiwali/edit?html,js,output
I would generate an .html to download only the code generated after the html tag.
Thank you

something like
function downloadAsFile(filename, type, data) {
window.URL = window.URL || window.webkitURL;
var a = document.createElement("a");
var blob = new Blob([data], {type: type});
var url = window.URL.createObjectURL(blob);
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
downloadAsFile('myfile.html', 'text/html', myData)

Javascript Blob Download

Following Problem: this Code isn't working in IE9. And in an actual Chrome Browser it is working but the downloaded file is corrupt (the "corrupted file" part also could happen elsewhere ... any suggestion how to do it in IE9 would be nice ).
var file = records[0].data.Files[0].Value.Buffer;
var fileName = records[0].data.Files[0].Value.FileName;
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([file], { type: 'application/octet-stream' }));
a.download = fileName;
document.body.appendChild(a)
a.click();
document.body.removeChild(a)

Categories

Resources