We Keep Coding

PDF in iFrame getting downloaded instead of displaying [duplicate]

I want to open the pdf file in an iframe. I am using following code:
<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"> User guide </a>
It is opening fine in Firefox, but it is not opening in IE8.
Does anyone know how to make it work also for IE ?

Using an iframe to "render" a PDF will not work on all browsers; it depends on how the browser handles PDF files. Some browsers (such as Firefox and Chrome) have a built-in PDF rendered which allows them to display the PDF inline where as some older browsers (perhaps older versions of IE attempt to download the file instead).
Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.
In your HTML, you could set up a div to display the PDFs:
<div id="pdfRenderer"></div>
Then, you can have Javascript code to embed a PDF in that div:
var pdf = new PDFObject({
url: "https://something.com/HTC_One_XL_User_Guide.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");

This is the code to link an HTTP(S) accessible PDF from an <iframe>:
<iframe src="https://research.google.com/pubs/archive/44678.pdf"
width="800" height="600">
Fiddle: http://jsfiddle.net/cEuZ3/1545/
EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at run-time...
EDIT 2: Apparently, it is a bug (but there are workarounds):
PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?

It also important to make sure that the web server sends the file with Content-Disposition = inline.
this might not be the case if you are reading the file yourself and send it's content to the browser:
in php it will look like this...
...headers...
header("Content-Disposition: inline; filename=doc.pdf");
...headers...
readfile('localfilepath.pdf')

The direct PDF didn't work on Mobile phones and it doesn't support responsive UI.
Here is the best solution.
https://stackoverflow.com/a/66548544/2078462

Do it like this: Remember to close iframe tag.
<iframe src="http://samplepdf.com/sample.pdf" width="800" height="600"></iframe>

Base64 sourced IFrame not displaying in mobile/responsive screens and devices

I am using an IFrame to display a PDF which is sourced from a Base64 byte string. My frame tag looks like the below (I'm using Angular).
<iframe id="pdfV" type="application/pdf" [src]="currentBase64"></iframe>
The currentBase64 variable starts with data:application/pdf;base64, and has been appropriately sanitized. On any browser it works great. However, when I am in responsive mode in Chrome, or viewing on a phone, it doesn't display the frame for some reason. The only other example I can provide is the below
http://pdfmake.org/playground.html
This playground is doing the same thing I am. Passing Base64 to IFrame to display PDF. Notice is works great until you put the screen into responsive mode -- at that point it stops refreshing.
I believe it has to do with the Base64 part of it all because when I change my frame tag to something simple such as the below it works great, even on mobile devices.
<iframe [src]="'https://www.google.com'"></iframe>
Any thoughts or solutions?

Opening a Base64 encoded PDF in native pdf viewer

I'm working on generating pdfs that contain the image from a html canvas element. I've managed to get an implementation of that working, but I'm having trouble opening the result in a useful way.
PDF.dataURI() returns a string that looks like data:application/pdf;base64,BASE64_ENCODED_PDF_HERE.
I'm currently using window.location = certificate.dataURI() to open up the pdf. I already tried window.open, but Safari wouldn't play nice with it.
RESULTS:
In Firefox, this saves a file that is a random name, followed by .pdf(1).part.
In Safari (desktop and mobile), it opens the PDF in the same tab, but doesn't bring up any pdf viewer interface.
In Chrome, it opens the PDF in the same tab and brings up the PDF interface.
Basically, my question is how to open a string of that format inside of the browser as a PDF, ideally in a new tab.
Any thoughts?

You can use iframes to view the pdf like below
<object data="data:application/pdf;base64, your_base64_data" type="application/pdf">
<iframe src="https://docs.google.com/viewer?&embedded=true"></iframe>
</object>

have you tried document.location.href ?
you can try to control UI interface for PDF viewer from appropriate options inside generated pdf but browser may ignore it, so as al

PDF calling twice in IE

I am facing an issue with PDF loading in my page.
I am using object tag to embed PDF,
<object data='addDocs.do?viewName=PDF&id="+$("#pdfId").val()+"&File=regDoc.pdf' type='application/pdf' width='95%' height='750'> </object>
This is getting called twice when using IE Browser.
I did some search on the same question and tried with response.setDateHeader("Expires", 30000);. No Luck.
I can't use IFRAME because I need to open the links inside the PDF in the same window rather than inside IFRAME.
When using EMBED tag to load PDF, If the size of the PDF is larger then browser is freezing.
So, please help me out on calling PDF only once in IE.
Thanks in advance.

Problem printing contents of Canvas tag (Chrome, Opera)

These browsers (Windows versions) correctly print a web page which has a canvas overlay over an img tag image:
IE6, IE7, IE8, Firefox, Safari
But Chrome (up-to-date as I type this at version 3.0.195.27) and Opera (up-to-date as I type this version 10.0 build 1750) don't. Chrome ignores the canvas rendering entirely. Opera renders the entire canvas as a white rectangle, obscuring the image behind it.
I know the canvas tag is rather new, and that printing web pages is always dicey. How should I handle this? Are there any settings I'm missing to make this work? Is there an "about to print" event I can catch from JavaScript to at least warn the user?
Update: It's even weirder than it seems. The combined image (canvas overlaying an img) prints correctly on my Brother laserjet but not on my hp inkjet).
So the current situation is that most browsers print correctly to my inkjet, but Chrome does not. Opera screws up on both printers.
Is this all down to printer drivers and how various browsers communicate with them?
Update: I notice that Google Docs builds a PDF for printing.

You can use PHP's PDF functions to create PDF's programmatically. It's really easy!
To create a new PDF:
$pdf = pdf_new();
Open the file:
pdf_open_file($pdf, "pdfName.pdf");
You can set some variables such as the author:
pdf_set_info($pdf, "Title", "pdf Title here");
Now you'll need to use the pdf_begin_page() function:
pdf_begin_page($pdf, 595, 842);
these are the dimensions for A4.
content
And close the file with:
pdf_end_page($pdf);
pdf_close($pdf);
For a complete reference, take a look at PHP's PDF manual.

I wonder, if instead of rendering to a <canvas> element: it might print correctly if you were to render to an off-document canvas object and set a CSS style on a <div> to have a background-image set to "url("+myCanvasObject.toDataUrl()+")".
Also, you could just set the src attribute of a new <img /> element to that same myCanvasObject.toDataUrl(). This should be handled better than the method I mentioned above..

I would suggest to save the page as PDF and try printing. A PDF document to print should be WYSIWYG. If the PDF renders right, any printer should print it fine.