This is quick, easy, to the point and doesn't require any third-party script:
<embed src="http://example.com/the.pdf" width="500" height="375"
type="application/pdf">
UPDATE (2/3/2021)
Adobe now offers its own PDF Embed API.
(That requires registering at Adobe and get clientID to use within js)
https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html
UPDATE (1/2018):
The Chrome browser on Android no longer supports PDF embeds. You can get around this by using the Google Drive PDF viewer
<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
Videos
This is quick, easy, to the point and doesn't require any third-party script:
<embed src="http://example.com/the.pdf" width="500" height="375"
type="application/pdf">
UPDATE (2/3/2021)
Adobe now offers its own PDF Embed API.
(That requires registering at Adobe and get clientID to use within js)
https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html
UPDATE (1/2018):
The Chrome browser on Android no longer supports PDF embeds. You can get around this by using the Google Drive PDF viewer
<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.
Online demo: https://mozilla.github.io/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.js
Implementation of a PDF file in your HTML web-page is very easy.
<embed src="file_name.pdf" width="800px" height="2100px" />
Make sure to change the width and height for your needs.
1. Browser-native HTML inline embedding:
<embed
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></embed>
<iframe
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
- No PDF file size limitations (even hundreds of MB)
- It’s the fastest solution
Cons:
- It doesn’t work on mobile browsers
2. Google Docs Viewer:
<iframe
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
- Works on desktop and mobile browser
Cons:
- 25MB file limit
- Requires additional time to download viewer
3. Other solutions to embed PDF:
- https://mozilla.github.io/pdf.js
- https://pdfobject.com
- https://viewerjs.org
IMPORTANT NOTE:
Please check the X-Frame-Options HTTP response header. It should be SAMEORIGIN.
X-Frame-Options SAMEORIGIN;
A client has a "fact sheet" with different stats about their business. They need to update the stats (and some text) every month and create a PDF from it.
Am I crazy to think that I could/should do the design and layout in HTML(+CSS)? I'm pretty skilled but have never done anything in HTML that is designed primarily for print. I'm sure there are gotchas, I just don't know what they are.
FWIW, it would be okay for me to target one specific browser engine (probably Blink) since the browser will only be used to generate the 8 1/2 x 11 PDF.
On one hand I feel like HTML would give me lots of power to use graphing libraries, SVG's and other goodies. But on the other hand, I'm not sure that I can build it in a way so that it consistently generates a nice (single page) PDF without overflow or other layout issues.
Thoughts?
PS I'm an expert backend developer so building the interface for the client to collect and edit the data would be pretty simple for me. I'm not asking about that.