I'm using file-saver, npm package to download SVG URL image, which I display on one of my pages, but on Firefox and older chrome versions when I press the button to download the image, I'm being redirect instead of downloading the image
The native way would be to use the Content-Disposition HTTP header to instruct browsers to trigger file download instead of showing the content. For example:
Content-Disposition: attachment; filename="image.svg"
For the download links, you should also set the download attribute. This will prevent navigation to a resource. It will start a download instead.
For legacy IE, you may fallback to use navigator.msSaveBlob to trigger a manual download of a prepared Blob (you must first download the contents, then convert it to a Blob object so IE can save the result).
Related
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.
I try to add a feature that allow user to click a thumbnail and download the original picture to their computer or mobile phone from their browser.
I have successfully done it at desktop browser with <a href="source" download></a>.
However, this doesn't work with mobile browser apps like ios Safari, etc.
Does anyone know how to implement this for mobile browser?
Or is it available ?
I really need some help, thanks...
Note:
The image is totally from front-end.
The process is like:
1. Someone upload the image
2. Functions print image to canvas
3. Adding text using canvas API context
4. Output to image source from canvas
5. Download the source ( Issue is in this step)
you should set name for atr download.
pay attention to source of image. if you use image from sub domain or other domain, this will not work.i think that its for security and browsers in new update not allow direct download from other origin.
i also set allow origin to sub domain in header of site, but its not work.
so the solution is:
use this tag in header of request of images. it is a sample that i used in asp.net
this.Response.AddHeader("Content-Disposition", "attachment; filename=\"" + dname + extention + "\"");
EDIT:
FOUND MY MISTAKE:
line 3 in this example, the $(this) selector isn't valid in this case. So the command is skipped, the download attribute isn't set and instead of downloading, the browser tries to navigate to the dataUrl, which is prohibited. Cue errors.
I have a PWA that stores images as base64 pngs. I want to give users the option to download them to their device.
Previously I used this really simple code where myAnchor is an anchor-tag in my HTML and pic contains the base64 png:
function imgDownload(pic) {
$('#myAnchor').attr('href', pic);
$(this).attr('download', 'image.png');
$('#myAnchor')[0].click();}
So: simply set href to the image, set download attribute and filename, then trigger the download by clicking the link. But either Chrome 60 or 61 broke that - apparently for security reasons -, it now results in this error:
Not allowed to navigate top frame to data URL: [my b64 png]
Is there a (preferrably not too complex) client-side alternative to achieve the same functionality? It only has to work in Chrome, more browser compatibility is nice of course, but not neccessary.
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?
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