How to Embed PDF File into a web page using JavaScript and HTML

Posted on 17th November, 2025

EMBED PDF LOAD PDF INTO WEBPAGE VIEW PDF ON WEBPAGE

Embedding a PDF into a web page using JavaScript and HTML typically involves fetching the PDF data as a binary object and then rendering it within an HTML element, often an <iframe> or a <canvas> with the help of JavaScript or a library like PDF.js.

Method 1: Using an <iframe>

This method involves fetching the PDF as an arrayBuffer and then creating an object URL to set the src of the <iframe>.

Method 2: Using PDF.js and a <canvas>

This method provides more control over the PDF rendering and allows for features like page navigation, zooming, and text selection, but requires integrating the PDF.js library.

The script is very easy to understand and customize. Just download the zipped folder containing the files and upload to your server. You can then view the index.html, embed-pdf-js.html and object-pdf.html individually to test the different methods

To see the script in action, simply click on the Live Demo button below and download the script if you like what you see.

Do not hesitate to support our work if this is of use to you by clicking on the donate button below.

Thank you.

The Vasplus Team.

Screen Shots

Click on a photo below to scroll through the screen shots of the application!

Live Demo

Post Comment

Press Enter to send

No comment yet.

Vasplus Programming Blog

Popular Tutorials Pagination System using Ajax, Jquery and PHP Send Friend Request, Accept or Decline Request using Ajax, Jquery and PHP Contact Form with Captcha using Ajax, Jquery and PHP Why Having a FREE website is bad Choice Bulk image resize with PHP Web Browser Notification System using JavaScript Introduction to php.ini File Types of PHP Errors Program Execution Time Limit in PHP To-do list using PHP and MySQLi Move File from One Folder to the other using PHP How to change or convert MySQL to MySQLi How to Upload Video Files using PHP and MySQLi Convert HTML to MS Word Document using PHP Eight Reasons Why You Need A Business Website Local Web Development Server for Windows - XAMPP Easy Shopping Cart using HTML, CSS & JavaScript Comment System using PHP, Ajax and MySQLi Add, Edit and Delete Record from Database using jQuery and PHP Responsive Contact Form with Captcha using Jquery and PHP Update or Delete Multiple Rows using PHP Password Strength Checker using Jquery Facebook Style Auto Scroll Pagination using jQuery and PHP Domain Checker using Ajax, Jquery and PHP The if else & elseif Statements in PHP

Submit your Job or Project Today!

We can help you turn your idea into reality, take over your existing project, or extend your current development team.

Submit your idea job or project below and we will follow up with you shortly.

OUR OBJECTIVE

Our objective is to reach a place where our services will be highly regarded by businesses from various industrial domains for building their innovative busines solutions with our cutting-edge technological expertise, interactive designs and uncompromised quality.

OUR MISSION

We aspire to help businesses ranging from startups to enterprises, who reach out to us with their requirements, in achieving great lengths, expanding their reach, upscaling their products, and generate a large user-base with our outstanding and cost-effective services.