I am creating a script that lets you download a CSV File of current table on the page like this:
var downloadLink = document.createElement("a");
var blob = new Blob(["", CSVString], {type: 'text/csv;charset=utf-8'});
if (navigator.appVersion.toString().indexOf('.NET') > 0) {
window.navigator.msSaveOrOpenBlob(blob, "Daten.csv");
}
else {
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.download = "Daten.csv";
downloadLink.style.display = 'none';
document.body.appendChild(downloadLink);
downloadLink.click();
}
Now if I use IE it asks if I want to download a file from localhost, but in Mozilla Firefox the download window says "From: blob:". Can it be changed to show the host name or a name that I specify (e.g. Test)?
Pitifully there's no available solution till the date. The issue was reported a couple of years ago but it seems it has the minor importance level and no one is asigned to this issue.
The From label will always display from: blob::
No matter what you do.
Related
I need to download pdf's from one of our online resources.There is no built in function to batch download.The only way to do it is to navigate to each pdf file, click to open, then click download.
There are several thousand files and this would take a very long time to do.
I got around this in the past using javascript. I gathered all the links to the pdfs, put them in a csv, and had the code loop through each link, download, and move onto the next link.
Unfortunately, I have lost that code and my efforts to recreate it have been unsuccessful.
I have tried everything in this article: How to download PDF automatically using js?
I have tried the code from this article (which I'm pretty sure is what I did before): https://www.convertplug.com/plus/docs/download-pdf-file-forcefully-instead-opening-browser-using-js/
This is what I think should work...per the second article I referenced above
function download_file(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = 'file.pdf';
link.dispatchEvent(new MouseEvent('click'));
}
var fileURL = "link/to/pdf";
var fileName = "test.pdf";
download(fileURL,fileName);
The code above is just to test download one file from a hardcoded URL. If it worked as intended, when the page is loaded, it should download the pdf from the provided url. Instead, it doesn't do anything on load or refresh.
Any suggestions?
Please check
https://stackoverflow.com/a/18983688/6923146
click me
Another one
https://stackoverflow.com/a/45905238/6923146
function download(url, filename) {
fetch(url).then(function(t) {
return t.blob().then((b)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(b);
a.setAttribute("download", filename);
a.click();
}
);
});
}
download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,Hello Developer!", "HelloDeveloper.txt");
I hope it helpfull
https://www.convertplug.com/plus/docs/download-pdf-file-forcefully-instead-opening-browser-using-js/
You must add link element to DOM
function download_file(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
var fileURL = "https://cdn.sstatic.net/clc/img/jobs/bg-remote-header-sm.png";
var fileName = "test.pdf";
download_file(fileURL, fileName); // fix function name
Link must be in same origin
The download attribute on anchor was ignored because its href URL has a different security origin.
A snippet of client-side Blob saving code has suddenly stopped working in Google Chrome. The same code continues to work in Firefox. The code is almost identical to that provided in this answer, among others.
var downloadLink = document.createElement("a");
var url = URL.createObjectURL(new Blob(["\ufeff", rows]));
downloadLink.href = url;
downloadLink.download = filename;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
Setting a breakpoint on the .click() and then single-stepping causes the file to download as expected, but running the code normally does not. I did find that wrapping the .click() in a setTimeout does allow it to succeeed, but only if the timeout is sufficiently long
var downloadLink = document.createElement("a");
var url = URL.createObjectURL(new Blob(["\ufeff", rows]));
downloadLink.href = url;
downloadLink.download = filename;
document.body.appendChild(downloadLink);
setTimeout(function() {
downloadLink.click();
document.body.removeChild(downloadLink);
}, duration);
where
Duration | Download
----------+----------
0 ms | Fail
1 ms | Fail
10 ms | Fail
100 ms | Fail
1000 ms | Succeed
I don't know for sure that the problem started at Version 57, but I am looking for any information or advice on how to improve the Blob download without resorting to a setTimeout hack.
** Edit **
I should be clear that the Blob download is being triggered by a button click initiated by the user and is not a piece of code that runs unconditionally upon page load.
Since replacing the provided download code with a call to the FileSaver,js saveAs function worked, I decided to look at the FileSave code and see how it differed from my implementation.
The core difference is that File Saver creates an anchor node, but does not add it to the DOM. After removing some extraneous code, I distilled the issue down to the appendChild call
Working Code
var downloadLink = document.createElement("a");
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = filename;
// document.body.appendChild(downloadLink);
downloadLink.click();
Removing the commented line causes the code to fail again.
I am using 57 and the following works for me. Can you confirm it works for you as well to pinpoint whether its something to do with this code or something else in your page.
<html>
<head>
<script>
function download(filename, text) {
var element = document.createElement('a');
var url = URL.createObjectURL(new Blob(['\ufeff', text]));
element.id = 'downloadLink';
element.href = url;
element.download = filename;
document.body.appendChild(element);
var downloadLink = document.getElementById('downloadLink');
downloadLink.click();
document.body.removeChild(downloadLink);
}
</script>
</head>
<body>
<button onclick="download('test.txt', 'Hello this is a test')">Click Me</button>
</body>
</html>
If its a timing issue then the document is probably not finished loading yet (hence setting the timeout long enough allows for it to be). Instead, try attaching to an event where you know the document is fully loaded.
var downloadLink = document.createElement("a");
var url = URL.createObjectURL(new Blob(["\ufeff", rows]));
downloadLink.href = url;
downloadLink.download = filename;
document.body.appendChild(downloadLink);
document.onload = function() {
downloadLink.click();
document.body.removeChild(downloadLink);
};
Note The reason the code works in the example you mentioned is because its a user fired event (submission of a form).
Anchor tag not downloading file in IE, instead it gives the option to search for app in app store to open file. For chrome and FF this code is working fine. I don't know this is happening in windows 7 or not as I am using windows 8.1 and windows 7 don't have option for apps.
var a = document.createElement("a");
a.href = filepath;
a.download = filename;
a.click();
Any help will be highly appreciated.
Thanks.
Directly quoting from SOpost
Internet Explorer does not presently support the Download attribute on A tags.
See http://caniuse.com/download and http://status.modern.ie/adownloadattribute; the latter indicates that the feature is "Under consideration" for IE12.
this might help:
var blob = new Blob([response.responseText], { type: headers['content-type'] });
if (navigator.msSaveOrOpenBlob) {
//Launches the associated application for a File or Blob saving for non webkit based browser such as safari or IE
navigator.msSaveOrOpenBlob(blob, "cvSummary.xml");
}
else {
//code for webkit based browser
var link = document.createElement('a');
document.body.appendChild(link);
link.style = "display: none";
var url = window.URL.createObjectURL(blob);
link.href = window.URL.createObjectURL(blob);
link.download = "cvSummary.xml";
link.dataset.downloadurl = ["text/xml", link.download, link.href].join(':');
link.click();
window.URL.revokeObjectURL(url);
}
I asked this earlier but someone down voted and accused me of trying to write files to local filesystem without reading.
I have website in an enterprise environment which will only ever be accessed in chrome so keep that in mind.
I am able to select a local folder on my PC and open all sub-folders and files in the browser. I'm using client side javascript to parse these files and look for a particular kind of .xml file that is used internally to render a powerpoint like presentation. I can make changes to this xml file and spit it back out as a blob.
What I would like to do but don't know how is replace the data or blob in the original file with the modified data/blob.
Can the user interact with the data blob? If so, you can use a save file function and overwrite the original.
function saveFile( data )
{
var textFileAsBlob = new Blob([yourData], {type:'text/plain'});
//or replace the code above with your already formed blob
var fileNameToSaveAs = "File_Name_Goes_Here.xml";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
//downloadLink.innerHTML = "Download File";
if (window.webkitURL != null){
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
try {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
catch( e ){
console.log("error saving firefox file")
}
// IE 10+
try {
window.navigator.msSaveBlob(textFileAsBlob, fileNameToSaveAs);
}
catch(e){
console.log("error saving IE file")
}
}
try {
downloadLink.click();
}
catch(e) {
console.log("Unable to click the download link. Are you using IE?")
}
}
I grabbed this code from somewhere else on stack overflow. I can't remember who it's from though to provide attribution :-(
uri = "data:text/csv;charset=utf-8," + escape(str); // str contain csv data
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "test.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
code is working in chrome ,but not working in internet explorer getting some issue like SCRIPT122: The data area passed to a system call is too small.
i need to work it with ie 8 and without using server, please give some solution ,
thanks is advance.
CanIUse.com indicates that IE10/11 do not support the download attribute on links.
see http://caniuse.com/#feat=download
Your options are ping-pong with a server and telling users to use another browser.
Use this for IE,
var IEwindow = window.open();
IEwindow.document.write('sep=,\r\n' + CSV);
IEwindow.document.close();
IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
IEwindow.close();
see - Download JSON data in CSV format Cross Browser Support
Hope this will be helpful for you.