Download a file using a blob URL in safari - javascript

Using Chrome or Firefox I can easily do something like this in my HTML:
<a href="http://urlofmyblob.com/blobid"/a>
This immediately starts a download when the anchor linked is clicked in most browsers. However, in safari this only opens a new tab with the contents of my blob in text form. Does safari support downloading blobs from a remote URL? Also, is there a way I can do this using the href property in an anchor link?

Related

Manually clicking a link in Android Google Chrome behaves differently than clicking it through code

I have this anchor tag in my html that should download a PDF:
<a id="download" href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
Download
</a>
And here is my script:
document.getElementById('download').click();
The link works fine, it's downloading the PDF as expected. What I don't get is that in Android Google Chrome (or any other mobile Chromium based browsers), if I press the link manually it opens my PDF Viewer app right away, but if I try to make the code automatically click the link (as in the code above) it only downloads the PDF in background without opening my PDF Viewer app.
The desired behavior should be the first one, as in when I manually press the link it should open the PDF Viewer app. How can I accomplish that by code too? Any ideas why does this happen?
You can check the behavior on this link: https://802753.playcode.io
Or check the snippet here: https://playcode.io/802753
If that's the intended behavior, could anyone point me to any resource about it? I don't know where else to search...
Try this out
<a [attr.href]="link" download="filename.pdf">Download</a>
else
<a (click)="download(link)" >Download</a>
public download(link){
var a = document.createElement('a');
a.href = link;
a.target = "_blank";
a.download = link.split('/').pop();
document.body.append(a);
a.click();
document.body.removeChild(a);
}
Apparently, just like #Armaggheddon said, it's an intended Android Chromium behavior as you can see in these links: javascript mailto not working in chrome mobile browser and https://bugs.chromium.org/p/chromium/issues/detail?id=477456#c5
Because they're too old (2014-2015), I welcome any news you guys may have.

pdf not getting embedded in html IE11

I want to embed base64 encoded string of pdf into an html template.
<iframe src="data:application/pdf;base64, encodeURI(pdfstring)"></iframe>
This works fine in chrome and edge but showing blank page in IE 11.I do not want to download it.Is there a fix for IE11
It doesn't work because IE doesn't support iframe with data url as src attribute. You could check it in caniuse. It shows that the support is limited to images and linked resources like CSS or JS in IE. Please also check this documentation:
Data URIs are supported only for the following elements and/or
attributes.
object (images only)
img
input type=image
link
CSS declarations that accept a URL, such as background, backgroundImage, and so on.
You can only do what like the accepted answer says:
The only workaround for this is to return your PDF content from a HTTP/HTTPS or FTP URI and use that as the source of the IFRAME.

Issue with anchor href set to a "blob:" URL using a target of "_blank" in Chrome

I am developing a website which allows users to download a PDF version of a page. The current solution is to render the generated HTML to a PDF on the server, which returns the Base64-encoded PDF as a result. A Blob is created from this data, followed by an ObjectURL as follows: -
const blob = new Blob([B64A.decode(pdfdata)], {type: 'application/pdf'});
dataURL = (window.URL || window.webkitURL).createObjectURL(blob);
The dataURL (which is in the form "blob:http://www.example.com/abcd1234-abcd-abcd-abcd-abcd1234efa") is then assigned to the href attribute of an anchor tag. The target attribute is also set to "_blank" so that the generated PDF is opened in a new tab.
This worked absolutely fine up until around a week ago. In Firefox, everything still works, however in Chrome there is a problem. When clicking the link, a tab quickly opens and then immediately closes. Removing the target attribute causes everything to work properly, although the PDF is loaded into the current tab which is not what I want. Nothing is logged to the console, so I am not getting any clues from there.
Does anyone have any ideas as to why this is happening? As this has only just started happening I am assuming it's an issue with the latest version of Chrome (I am running 57.0.2987.98 (64-bit) on Linux, although a colleague also has the same issue with Chrome on Windows 10).
EDIT:
I just created a CodePen example to demonstrate this: https://codepen.io/anon/pen/OpOGbE
Click the button and two links should be generated. The first should open normally in the same page. The second should open in a new tab, but does not in Chrome (for me it displays the same behaviour as mentioned above).
While running this test I just noticed that in an incognito window the issue seems not to exist, and the new tab opens correctly...
It seem to be a temporary bug in Chrome. The code works with current Canary (beta) version of Chrome (v.59.0.3044.1) as of this writing.
As a temporary workaround you could try using the original Base-64 data and just prepend a data-uri header to it, then use this as source for href:
const dataURL = "data:application/pdf;base64," + pdfdata;

html5 download attribute not working in FF

Hi I have an anchor tag with download attribute which when clicked downloads the image from the url defined in href. This works fine in Chrome but in Firefox it takes to the image in the browser. Is there any way we can make this work in FF
image
The problem with this is that in Firefox this only works for files with the same origin. From MDN:
In Firefox 20 this attribute is only honored for links to resources with the same-origin.
I see three solutions:
If you own the target image and has control over it, you should serve it from the same domain as the page where you put the link.
Set up a reverse proxy to serve the images through the same origin
Again, if you own the target site, you could serve it with a Content-Type: application/octet-stream header which will force the browser to download the image regardless of how the download link looks

JavaScript window.open(filename) doesn't work on IE

This works on Firefox but not on IE
window.open('/documents/some%20file.doc');
On IE it would open a new tab and immediately closes it. No save dialog.
Is there any way to let user download a file on IE using JavaScript if we have the file URL?
(The file URL is dynamic so it cannot be an <a href=''> tag)
Thanks in advance.
document.location.href = '/documents/some%20file.doc';
window.open("/documents/some%20file.doc","_self","fullscreen=no,toolbar=yes,width=800,height=600,menubar=yes,status=no,scroll=yes");

Categories

Resources