etutorialspoint
  • Home
  • PHP
  • MySQL
  • MongoDB
  • HTML
  • Javascript
  • Node.js
  • Express.js
  • Python
  • Jquery
  • R
  • Kotlin
  • DS
  • Blogs
  • Theory of Computation

JavaScript display PDF in the browser using Ajax call

In this article, you will learn how to display PDF in the browser using Ajax call.

Ajax provides the ability to dynamically change portions of a web page without reloading the complete web page. Some portions of a web page are static, like the header, footer, menus, that need to be reload when the user interacts with the page. The reloading of the page takes extra user time. You have experienced that when you click on some request, that page may hang because a lot of information is trying to load at once.





Ajax provides a facility to dynamically update some portions of a web page without disturbing or reloading the other portions of the web page. For this, we just have to develop a container to display output from a program hosted on a web server. Here is the basic example of how to display PDF files within the web page content using AJAX call.

JavaScript display PDF in the browser using Ajax call

index.html

First, we have created a main HTML file that we will call in the browser. This file contains basic HTML code. We have added a button 'Click Here'. When the user clicks on this, it calls a JavaScript function called 'ajaxRequest()'. In the header section of this page, we have included one style sheet file 'style.css' and one JavaScript file 'ajax.js' -

<html>
 <head> 
  <title>Javascript Ajax Demo</title>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet">
  <script type='text/javascript' src='ajax.js'></script>
 </head>
<body>
 <div id="wrapper">
 <div id="header"> 
 <h1>Welcome to eTutorialsPoint</h1> 
 </div>
 <div id="content"> 
 <h2>Information</h2>
 <p>You can view the information in detail on click the below button-</p>
 <br/>
 <input type='button' onclick='ajaxRequest();' value='Click Here'/>
 <br/>
 
 <div id='getAjaxResponse'>
 When you click the above button, this section changes and load PDF file.
 </div> 
 </div>
 <div id="footer">
 Copyright © 2019 etutorialspoint.com
 </div>
 
 </div> 
</body>
</html>




style.css

Here is the stylesheet 'style.css' to enhance the user interface, that we have included in the above 'index.html' file.

body { background-color: #CCCCCC ;
font-family: Arial, Verdana, sans-serif; }
h1 { margin: 10px; }
h2 { color: #000000;
font-family: Arial, sans-serif; }
#wrapper { margin: 0 auto;
width: 85%;
min-width: 800px;
background-color: #0093D1;
color: #000066; }
#header { background-color: #0093D1;
color: #00005D; }
#content { background-color: #ffffff;
color: #000000;
padding: 10px 20px;
overflow: auto; }
#footer { font-size: 80%;
text-align: center;
padding: 5px;
background-color: #0093D1;
color: #ffffff;
clear: both;}




ajax.js

Here is the JavaScript 'ajax.js' file, that we have called on 'index.html' page.

function getXMLHttp()
{
 var xmlHttp;
 try
 {
  xmlHttp = new XMLHttpRequest();
 }
 catch(e)
 {
  //Internet Explorer is different than the others
  try
  {
   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e)
  {
   try
   {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch(e)
   {
    alert("You have Old Browser! Please update to use AJAX call.")
    return false;
   }
 }
}
return xmlHttp;
}

function ajaxRequest()
{
 var xmlHttp = getXMLHttp();
 xmlHttp.onreadystatechange = function()
 {
 if(xmlHttp.readyState == 4)
 {
  handleResponse(xmlHttp.responseText);
 }
 }
xmlHttp.open("GET", "doc.html", true);
xmlHttp.send(null);
}

function handleResponse(response)
{
document.getElementById('getAjaxResponse').innerHTML = response;
}

doc.html

Here is the HTML file that has an embedded PDF file using the iframe element. The whole of the HTML page content will be placed within the div id 'getAjaxResponse' on Ajax call.

<h1>Here is the detail information in PDF</h1>
<iframe src="document/etp.pdf" width="90%" height="500px">
</iframe>




Related Articles

Remove duplicates from array JavaScript
How to reverse a number in JavaScript
Select/deselect all checkboxes using JavaScript
Print specific part of a web page in JavaScript
JavaScript speech recognition example
Submit a form data without page refresh using PHP, Ajax and Javascript
How to convert associative array to XML in PHP
Get Visitor Information by IP Address in PHP
Getting Document of Remote Address
Get Visitor's location and TimeZone
Get current visitor's location using HTML5 Geolocation API and PHP
JavaScript display PDF in the browser using Ajax call
How to generate PDF file using mPDF in PHP
Export data from MySQL table to CSV file using php
How to display PDF file in PHP from database
Polling System using PHP, MySQL and Ajax
How to read CSV file in PHP and store in MySQL
PHP File Upload MIME Type Validation with Error Handler
File Upload Validation in PHP




Most Popular Development Resources
Retrieve Data From Database Without Page refresh Using AJAX, PHP and Javascript
-----------------
PHP Create Word Document from HTML
-----------------
How to get data from XML file in PHP
-----------------
PHP code to send email using SMTP
-----------------
Hypertext Transfer Protocol Overview
-----------------
Characteristics of a Good Computer Program
-----------------
How to encrypt password in PHP
-----------------
Create Dynamic Pie Chart using Google API, PHP and MySQL
-----------------
PHP MySQL PDO Database Connection and CRUD Operations
-----------------
Splitting MySQL Results Into Two Columns Using PHP
-----------------
Dynamically Add/Delete HTML Table Rows Using Javascript
-----------------
How to get current directory, filename and code line number in PHP
-----------------
How to add multiple custom markers on google map
-----------------
Get current visitor\'s location using HTML5 Geolocation API and PHP
-----------------
Simple star rating system using PHP, jQuery and Ajax
-----------------
How to Sort Table Data in PHP and MySQL
-----------------
Fibonacci Series Program in PHP
-----------------
Simple pagination in PHP with MySQL
-----------------
How to generate QR Code in PHP
-----------------
PHP MYSQL Advanced Search Feature
-----------------
jQuery loop over JSON result after AJAX Success
-----------------
Submit a form data using PHP, AJAX and Javascript
-----------------
Recover forgot password using PHP7 and MySQLi
-----------------
PHP Server Side Form Validation
-----------------
jQuery File upload progress bar with file size validation
-----------------
PHP user registration and login/ logout with secure password encryption
-----------------
To check whether a year is a leap year or not in php
-----------------
Php file based authentication
-----------------
Simple File Upload Script in PHP
-----------------
PHP User Authentication by IP Address
-----------------
Simple PHP File Cache
-----------------
Calculate the distance between two locations using PHP
-----------------
PHP Secure User Registration with Login/logout
-----------------
Polling system using PHP, Ajax and MySql
-----------------
How to print specific part of a web page in javascript
-----------------
Detect Mobile Devices in PHP
-----------------
Simple Show Hide Menu Navigation
-----------------
Simple way to send SMTP mail using Node.js
-----------------
SQL Injection Prevention Techniques
-----------------
Get Visitor\'s location and TimeZone
-----------------
Preventing Cross Site Request Forgeries(CSRF) in PHP
-----------------
Google Street View API Example
-----------------
PHP Sending HTML form data to an Email
-----------------
CSS Simple Menu Navigation Bar
-----------------
Date Timestamp Formats in PHP
-----------------
Driving route directions from source to destination using HTML5 and Javascript
-----------------
Convert MySQL to JSON using PHP
-----------------
PHP Programming Error Types
-----------------
Set and Get Cookies in PHP
-----------------
How to add google map on your website and display address on click marker
-----------------
How to select/deselect all checkboxes using Javascript
-----------------
PHP Getting Document of Remote Address
-----------------
File Upload Validation in PHP
-----------------
How to display PDF file in web page from Database in PHP
-----------------
PHP FTP Connection and File Handling
-----------------


Most Popular Blogs
Most in demand programming languages
Best mvc PHP frameworks in 2019
MariaDB vs MySQL
Most in demand NoSQL databases for 2019
Best AI Startups In India
Kotlin : Android App Development Choice
Kotlin vs Java which one is better
Top Android App Development Languages in 2019
Web Robots
Data Science Recruitment of Freshers - 2019


Interview Questions Answers
Basic PHP Interview
Advanced PHP Interview
MySQL Interview
Javascript Interview
HTML Interview
CSS Interview
Programming C Interview
Programming C++ Interview
Java Interview
Computer Networking Interview
NodeJS Interview
ExpressJS Interview
R Interview


Popular Tutorials
PHP Tutorial (Basic & Advance)
MySQL Tutorial & Exercise
MongoDB Tutorial
Python Tutorial & Exercise
Kotlin Tutorial & Exercise
R Programming Tutorial
HTML Tutorial
jQuery Tutorial
NodeJS Tutorial
ExpressJS Tutorial
Theory of Computation Tutorial
Data Structure Tutorial
Javascript Tutorial




General Knowledge

listen
listen
listen
listen
listen
listen
listen
listen
listen


Learn Popular Language

listen
listen
listen
listen
listen

Blogs

  • Jan 3

    Stateful vs Stateless

    A Stateful application recalls explicit subtleties of a client like profile, inclinations, and client activities...

  • Dec 29

    Best programming language to learn in 2021

    In this article, we have mentioned the analyzed results of the best programming language for 2021...

  • Dec 20

    How is Python best for mobile app development?

    Python has a set of useful Libraries and Packages that minimize the use of code...

  • July 18

    Learn all about Emoji

    In this article, we have mentioned all about emojis. It's invention, world emoji day, emojicode programming language and much more...

  • Jan 10

    Data Science Recruitment of Freshers

    In this article, we have mentioned about the recruitment of data science. Data Science is a buzz for every technician...

Follow us

  • etutorialspoint facebook
  • etutorialspoint twitter
  • etutorialspoint linkedin
etutorialspoint youtube
About Us      Contact Us


  • eTutorialsPoint©Copyright 2016-2022. All Rights Reserved.