I have below snippet that download the "Test.csv" in IE11, CHROME very well.
But nothing happens in case of FIREFOX 39.0
Any Help will be appreciated.
var blob = new Blob([], { type: 'text/csv' });
/* It will work for IE versions
window.navigator.msSaveBlob(blob, 'Test.csv');
*/
var link = document.createElement("a");
//link.setAttribute("onclick","alert('Click Fired')");
link.href = URL.createObjectURL(blob);
link.download = 'Test.csv';
link.click();
Fiddle: http://jsfiddle.net/rq8460cL/2/
I seems like you have to add the link to the dom before you click it
var blob = new Blob([], { type: 'text/csv' });
/* It will work for IE versions
window.navigator.msSaveBlob(blob, 'Test.csv');
*/
var link = document.createElement("a");
//link.setAttribute("onclick","alert('Click Fired')");
link.href = URL.createObjectURL(blob);
link.download = 'Test.csv';
document.body.appendChild(link);
link.click();
http://jsfiddle.net/rq8460cL/3/
Related
I have the following Angular code to download a PDF document. It works fine in other browsers but in Firefox when browser settings are set to "Open in Firefox" for PDF download then it doesn't open a new tab.
const blob = new Blob([data], { type: docType });
const blobDoc = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobDoc;
link.download = 'Filename.pdf';
link.click();
What I want is that in case of Firefox the link must always be open in a new tab. Even if when I set the target attribute, it doesn't open the new tab.
link.target = '_blank'
I tried the following and it works but then I do not get the file name.
const agent = window.navigator.userAgent.toLowerCase();
if (agent.indexOf('firefox') > -1) {
window.open(blobDoc, '_target');
} else {
// Normal download
}
I am trying to create virtual links of list of files to be downloaded using javascript. The problem is that it is opening all files in the new tabs instead of downloading directly. I want it to be downloaded rather than open in a new tab.
Any help regarding it will be highly appreciated. So far, I have tried the following code to serve the purpose.
var link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);
for (var i = 0; i < links.length; i++) {
link.href = links[i];
link.download = tfiles[i];
link.target = '_blank';
link.click();
}
document.body.removeChild(link);
Instead of setting the download attribute like this link.download = tfiles[i]; use setAttribute('download',"download_filename"). So the resulting code will look like
var link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);
for (var i = 0; i < links.length; i++) {
link.href = links[i];
link.setAttribute('download',tfiles[i]);
link.target = '_blank';
link.click();
}
document.body.removeChild(link);
Assuming that tfiles is an array of the file names of files that you want to download.
Try out this working code in a simple html file for more exercise. The code might not work in stackoverflow run snippet, since this is a sand-boxed env.
<!DOCTYPE html>
<html>
<body>
<script>
function download() {
var link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);
link.setAttribute('download', "download");
link.href = "https://picsum.photos/id/237/200/300";
link.target = '_blank';
link.click();
}
</script>
<p>Click on the download button to download the image:
<p>
<button onClick="download()"> download</button>
<p><b>Note:</b> The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).</p>
</body>
</html>
You will want to use a Blob for this. You can use fetch to get the blob and then download. Similar to below:
var link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);
for (var i = 0; i < links.length; i++)
{
fetch(links[i])
.then(response => response.blob())
.then(blob => {
var url = window.URL.createObjectURL(blob);
link.href = url;
link.download = 'file_' + i;
link.click();
window.URL.revokeObjectURL(url)
})
}
document.body.removeChild(link);
I used the code suggested from Download CSV from an iPython Notebook to dynamically build the javascript code and pass it to the browser using Javascript() in python when called from a jupyter notebook. Code works great. If I embed the same code in a python function and call the python function from the same jupyter notebook, the call Javascript() in python no longer works. How can I make the reusable function work?
I am trying this on Chrome Version 73.0.3683.103 (Official Build) (64-bit) running on Windows 10. Apologies if already answered. I have scoured SO and google.
This works..
from IPython.display import Javascript
js_download = """
var csv = '%s';
var filename = 'results.csv';
var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
""" % data_in_dataframes.to_csv(index=False).replace('\r','\\r').replace('\n','\\n').replace("'","\'")
Javascript(js_download)
This does not work, it fails to execute Javascript(js_download), but neither does it give any error that I can see in the jupyter notebook nor the java console in the browser. It is as if it never executed Javascript(js_download).
from IPython.display import Javascript
def js_download_csv(df_download, s_filename='results.csv'):
js_download = """
var csv = '%s';
var filename = '%s';
var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
""" % (df_download.to_csv(index=False).replace('\r','\\r').replace('\n','\\n').replace("'","\'"), s_filename)
Javascript(js_download)
return None
js_download_csv(df_download, s_filename)
Apologies if I have left anything obvious out. I can find no errors or logs with any information regarding what is happening.
Any suggestions welcome.
I have found a partial answer, in that while I do not why this problem occurs, I have found how to overcome it. In https://medium.com/#tomgrek/reactive-python-javascript-communication-in-jupyter-notebook-e2a879e25906 we see in the article the following gotcha:
A big gotcha: something somewhere needs to return Javascript as its output, otherwise it doesn’t get executed in the notebook.
So, if we change the code to the following (i.e. return the Javascript call), it works.
from IPython.display import Javascript
def js_download_csv(df_download, s_filename='results.csv'):
js_download = """
var csv = '%s';
var filename = '%s';
var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
""" % (df_download.to_csv(index=False).replace('\r','\\r').replace('\n','\\n').replace("'","\'"), s_filename)
return Javascript(js_download)
js_download_csv(df_download, s_filename)
I have a download method that is working fine with firefox. When I tried same with IE-11. It does nothing. In further investigation found that while creating blob from arrayBuffer it's throw error for "Uint8Array is undefined". I read some forum where its clear mentioned that IE-11 supports UInt8Array link but according to my code it's seems that it does support.
What should I do to fix the issue - Can it fixed by adding specific js? or else
I am using following js code
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var fileName = decodeURI($scope.downloadedFileName);
var blob = new Blob([response], {
type: file.mime_type
});
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = $scope.downloadedFileName;
a.click();
window.URL.revokeObjectURL(url);
I am trying to download a png file using the uri (code below). It works in Chrome, Firefox and Safari - but not (of course) in Internet Explorer. I am on Windows 7, so I am using IE11 in Edge Document Mode. The error is "The data area passed to a system call is too small." I've read in this MDN post
IE9 and later, as well as Edge, supports data URIs in CSS and JS
files, but not in HTML files, with a max size of 4GB.
My URI is only 1410 bytes (using uri.length). Any ideas why I am getting the error with data of this size and how to fix it?
The download function:
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
The uri format:
"data:image/png;base64,iVBORw0KGgo ETC..."
The solution is below. I can't seem to find the link to give credit, but this solved it. Instead of converting the canvas to a uri first, I pass the canvas and either convert to a uri and download using a link or (for IE) I convert to a blob and use canavas.msToBlob() and msSaveBlob()
function downloadURI(canvas, name) {
if (navigator.msSaveBlob) { // IE10+
var blob = canvas.msToBlob();
return navigator.msSaveBlob(blob, name);
} else {
var uri = canvas.toDataURL("image/png")
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
if (link.click) {
link.click();
} else {
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window);
link.dispatchEvent(event);
}
document.body.removeChild(link);
}
}