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
Related
I'm using an iframe that has a PDF loaded.
<iframe src='some pdf url' id='print-pdf' style="border:0;display: none;"></iframe>
and using the below code to print the PDF.
let print_iframe = document.getElementById("print-pdf").contentWindow;
print_iframe.focus();
print_iframe.print();
And it's showing pdf Preview with a print option or save as PDF which normally comes using CMD + P.
So I want to skip that PDF preview screen and print the PDF directly.
After some digging i was able to find a alternate for this.
By default chrome or some other browser doesn't allow default preview skip.
Using kiosk mode we can skip the print preview.
e.g.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --kiosk --kiosk-printing
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>
Is it possible to use the Firefox JSON viewer in an iframe? I tried to put a data-uri in an iframe but it just shows the contents as string. If I use "Open frame in new tab" the viewer is opened correctly.
<iframe src="data:application/json;base64,eyJmb28iOnsic3BhbSI6ImhhbSJ9LCJiYXIiOlsxLDIsM119"></iframe>
I would like to use it as a debugging feature to show state of a data model variable, currently I use Angular <pre ng-bind="$ctrl.foo|json:2"></pre> a lot but it would be neat if it could be rendered using JSON viewer (at least in Firefox).
I have a PDF file being viewed on the browser.
I want to disable Save, Download and print option of the PDF file.
Please help.
Try this:
<object width="100%" height="100%" type="application/pdf"
data="yourpdffile.pdf#toolbar=0" id="pdf_content"><p>Document load was not
successful.</p></object>
Make sure you add #toolbar=0 in the data attribute after your pdf file.
You can use iframe to your own version of PDF viewer.
Use pdfJS and when showing viewer.html just remove these buttons.
If user is viewing it on it's own tool, than you can't control it.
Google Drive can disable the PDF functions to download, print and copy as of 2015.
Note however, that users can still print using the browser print function.
https://gsuiteupdates.googleblog.com/2015/07/disable-downloading-printing-and.html
As others have noted, once the pdf is being viewed by the user, they can save it.
If you are just wanting to obfuscate the download, you could disable the menu as described but to truly prevent downloading of the PDF, then only thing you could really do is a little crazy but not impossible.
You could convert it to images and show those instead. Not an ultimate solution as they would still be able to save each image, but at the very least they would not get a PDF file from it (or at least if they are smart enough to convert the images to one, it would not be the same pdf file or content)
There are many tools to do this and you'd have to implement a viewer with paging but this might achieve what you want.
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.