This pdf tutorial help to Embedded PDF viewer using HTML5 using PDFObject. The PDFObject is a lightweight JavaScript utility for dynamically embedding PDFs in HTML documents. It’s developed on javascript and HTML5 to view pdf files in web applications.
PDFObject renderer PDF without native code assistance. It is an open-source standards-friendly JavaScript utility for embedding PDF files into HTML documents. Its community-driven and supported by Mozilla Labs.
PDFObject allows you to display a message with a link to download Adobe Reader and/or the PDF file itself if your browser doesn’t already have a PDF plugin installed.
You can create a PDF viewer in your application using this java-script pdf library. It’s designed for modern browsers like Chrome, Firefox, Safari (OS X and iOS), IE 9-11, and MS Edge. This PDF viewer does not have jQuery dependency because it’s developed on core JavaScript code.
You can also check other tutorials of pdf viewer,
- PDFObject : Embedded PDF viewer using HTML5
- Simple Example of angular pdf viewer using pdf.js
- Exporting a DataTable into PDF File
Simple Example of PDFObject with Zoom, Print and Download
I will follow the following steps to view pdf using PDFObject and HTML5. We will create a container where PDF file will display and write small JavaScript code to display pdf file.
Step 1: Included PDFObject library file into the head section of index.html file.
<script src="/js/pdfobject.js"></script>
Step 2: Created a div container to hold your PDF file.
<div id="example1"> </div>
I am using '#example1' for container id.
Step 3: Now call PDFObject instance on the above container, which tell PDFObject which PDF to embed on it, and where to embed it.
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
Step 4: You can optionally use CSS to specify visual styling, including dimensions, border, margins, etc for your PDF container.
<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>
View PDF file online Using HTML5
You can easily embed PDF file on your webpage using HTML5 as well. HTML5 provides 'object' element which can be used to display PDF files on it using 'data' attribute.
How to display pdf in html
You can use an HTML object to view a PDF file using below HTML5 element.
<object data="url/pdftest.pdf"></object>
data attribute use for src of a pdf file that you want to view.
You can download the source code and Demo below link.
good