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

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=""></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.

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

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.

Popular posts from this blog

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

How To Connect SSH Using PEM Certificate On Windows

Intellij Error: Spring class file has wrong version 61.0, should be 55.0

MIME Types - Complete List

Step by Step How To Use cURL Library Using C From VS Code Windows