I need to embed a PDF file in an HTML page for the users to see it on every major device.
Most of the approaches work fine on desktop but they start to show problems on iPad devices. The PDFs are no longer scrollable if placed inside an iframe or embed tag.
I used the following techniques to overcome the problem:
1) Using pdf-image for node and converting the PDF to images and then sliding them in a div.
The problem in this approach is that the image quality gets degraded and is not suitable for viewing on Web.
2) Using PDF.js by Mozilla
It works fine on every device but it makes the page extremely slow and unresponsive on iPad
3) Using Google PDF viewer
<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>
The problem with this approach is that I need to make my PDFs publicly available which I don't want to do for security reasons.
None of the above method is working for me. Is there any solution available to embed PDF in a page which works on iPad also.
One of my colleagues told me about using LibreOffice(open office) headless to embed PDFs in my page but I cannot find any documentation about it usage?
Can anyone please help? :(
Thanks in advance!
<embed src="http://example.com/the.pdf" width="500" height="375" />
Try above one for pure HTML. But another option is if you'd like to use with javascript, try Pdf.js by mozilla. https://github.com/mozilla/pdf.js
I think the simplest way to embed a PDF into a web page is to use the object tag:
<object data="assets/test.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="assets/test.pdf">click here to
download the PDF file.</a></p>
</object>
What the code above will do is:
- If the user browsing your site has a PDF viewer plugin (which is included by default in some browsers) it will open the PDF in the browser:
- If the user does not have a PDF viewer plugin, they will be presented with a link to download the PDF and view it on their site.
I spent a lot of time with this issue and finally reached a solution for embeeding PDFs in a HTML files, also inspired by this post. You mentioned that "converting the PDF to images and then sliding them in a div" was not satisfactory due to quality problems. Here I experienced the same since the images were blurry.
However, I tried converting the images to SVG instead of PNG and the situation was a different one: The fonts were crystal-clear when embedding the image like below:
<object type="image/svg+xml" data="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg">
<!-- Your fall back here -->
<img src="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg" />
</object>
You can directly paste that snippet into a HTML file and you will see the result. For producing this example I used a ramdom PDF from ArXiv.org and converted it to SVG using an online converter.
There are also free command line tools like pdf2svg or commerical APIs like Aspose and probably it is worth examining which approach gives the best results.
You can easily build a slider which is loading the SVG images dynamically and it is even possible to scale them to different viewports due to the vector character of the SVG images. The approach so far worked for all PDFs I tried but probably it is recommendable to implement a fallback solution still using PNGs.
Related
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>
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?
I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.
If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js
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 have 2 external buttons which will be printing and saving an embedded pdf on the page. After a couple of hours searching on google I couldnt find any helpful to solve this. I know that the embedded object has buttons to print and save, but the client wants it with 2 outside buttons. I'll appreciate any help you can give me, thnx.
This is how I have the pdf
<div class="test">
<embed src="embedded.pdf" width="300" height="175" />
</div>
Does not look like this is possible for all browser due to security concerns. Please take a look at Invoking the print/save/email function of Adobe Reader plugin in browser for further explanation.
However, it may be possible with ActiveX in IE, see Silent print a embedded PDF.