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.
Related
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.
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
I'm having a problem with IE (I'm testing in IE9, but I believe it will behave the same way in the previous versions as well).
The response I'm sending from PHP is as follow:
{"success":true,"content":"<img src=\"\/media\/page\/1528484482.jpg\" width=\"140\" height=\"140\" alt=\"1528484482.jpg\" \/>"}
It works absolutely fine in Firefox, Chrome, Safari, Opera etc. - but it doesn't work in IE.
The response is an empty object.
When I change the response to the following it works fine - the only difference is the forward slash before the closing of the img tag:
{"success":true,"content":"<img src=\"\/media\/page\/1528484482.jpg\" width=\"140\" height=\"140\" alt=\"1528484482.jpg\">"}
Is there any way of parsing the 'content' response so that it doesn't break in IE?
(This is an advice, more than a solution)
Separate presentation layers (js/html [how]) and the domain layers (php [what]).
Domain layer decides what data to return.
Presentation layer decides how the data will be presented.
Return the image path, and make the presentation layer decide how to show the image to the user.
Now the solution of your problem would be on the declaration of the doctype.
I suppose the problem is for not declaring the doctype and IE is taking XHMTL as its default doctype.
In XHTML the tag must be properly closed.
http://www.w3schools.com/tags/tag_img.asp
The rest of the browsers takes HTML5, i suppose, and it doesn't require a closing tag on the image.
I got an AJAX function that loads a png from a canvas graph element and does (per user choice) open the image in a new browser window or force a download.
While the first works without a problem, I got a problem with adding the file extension to the download. Currently I simply get none, using the following HttpHeaders: image/octet-stream, application/download(force-download, x-download)
Gladly some SO user put a JsFiddle together. 1)
Question: How could I go and append a file extension (.png/.jpeg) to the forced download as seen in the JsFiddle example?
1) Sry, but I don´t know the User name anymore.
Unfortunately, with data uris, it is not possible to supply filenames. You should probably look at the HTML5 BlobBuilder API - http://blogs.msdn.com/b/ie/archive/2012/01/27/creating-files-through-blobbuilder.aspx
Even with BlobBuilder, I've found that only Chrome acknowledges the filenames you supply, not Firefox.
When I attempt to set an image to use a data url via JavaScript (from this question), it does not appear to work in IE8.
The page in that first link has: <img id="foo" src="alphaball.png">
On line 25, this JavaScript code executes: document.getElementById('foo').src = img_src;
On all other browsers (including IE9b) this successfully changes the image from the alphaball to a picture of my head. On IE8, I see the alphaball very briefly, and then it is replaced with a missing image icon.
Is this a known issue? Is there a workaround for using data urls with IE8 and JavaScript?
Internet Explorer versions before 9 do not support data URLs. There's an alternative mechanism that apparently kind-of works.
edit — actually I'm wrong; IE8 will support them as long as they're less than 32KB.
edit again — ok I found the article I was thinking about concerning the "MHTML" thing from Microsoft.