How to Embed PDF in HTML Using PDFObject

How to embed PDF with Javascript

Sometimes you have a PDF file that you need to display it to public, in modern browser like Google Chrome of course it have their default PDF reader, if you have a file contains PDF extension they will open it using PDF reader. But that reader is a full screen reader, meaning you can not put any of your HTML contents to display it side by side.

To just embed a PDF inside your HTML, you can do accomplished it by using PDFObject, you can see on this official website https://pdfobject.com/.

1. Create a container to hold your PDF

<div id="example1" style="height: 80vh; width: 80vw;"></div>

2. Tell PDFObject which PDF to embed, and where to embed it

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js"></script>
<script>PDFObject.embed("http://localhost/your-pdf.pdf", "#example1");</script>

Change the http://localhost/your-pdf.pdf with the location of your PDF file that you want to show

3. You can optionally use CSS to change the appearance of the containing element, such as height, width, border, margins, etc.

<style>
.pdfobject-container { height: 30rem; border: 1rem solid rgba(0,0,0,.1); }
</style>

Basically it is just embedding browser PDF reader, so there's not gonna be many thing you can do, probably only the size of the embedded container like as you can see on the above step number 1. I am using style to give the container with 80% of browser window and 80% of it's height. Other than styling using CSS on the container, i am hopeless that there's much more you can do about this library.

But for more detail information, for additional customization, you can go to the PDF Object website with the link i mentioned above and read their full documentation.

Comments

Popular posts from this blog

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

Flixify Video Streaming Platform, Watch Movies and TV Show Online

How To Uninstall Angular CLI, The Angular Framework

Google Adsense and Google Adwords

Push Notification Cordova, FCM And PHP

JavaFX Email Validation using Jfoenix Textfield