Skip to content
- Tutorials
- Python Tutorial
- Taking Input in Python
- Python Operators
- Python Data Types
- Python Loops and Control Flow
- Python Functions
- Python OOPS Concept
- Python Data Structures
- Python Exception Handling
- Python File Handling
- Python Exercises
- Java
- Java Programming Language
- Java Collections
- Java 8 Tutorial
- Java Programs
- Java Interview Questions
- Java Exercises
- Java Quiz
- Java Projects
- Advance Java
- Programming Languages
- System Design
- Interview Corner
- Computer Science Subjects
- DevOps
- Linux
- Software Testing
- Databases
- Android
- Excel
- Mathematics
- Python Tutorial
- DSA
- Data Structures
- Algorithms
- Analysis of Algorithms
- Searching Algorithms
- Sorting Algorithms
- Greedy Algorithms
- Dynamic Programming
- Graph Algorithms
- Pattern Searching
- Recursion
- Backtracking
- Divide and Conquer
- Mathematical Algorithms
- Geometric Algorithms
- Bitwise Algorithms
- Randomized Algorithms
- Branch and Bound
- Algorithms Tutorial
- DSA Tutorial
- Practice
- All DSA Problems
- Problem of the Day
- Company Wise Coding Practice
- GfG SDE Sheet
- Practice Problems Difficulty Wise
- Language Wise Coding Practice
- Curated DSA Lists
- Competitive Programming
- Company Wise SDE Sheets
- DSA Cheat Sheets
- Top Interview Questions
- Puzzles
- Data Science
- Web Tech
- Courses
-
Last Updated : 26 Jun, 2024
Summarize
Comments
Improve
We will learn how to embed PDF files in HTML documents and explore their implementation through examples. Sometimes, you may want to insert a PDF file into an HTML document to make the content more interactive. Since HTML and PDF formats are different, embedding PDFs can be a bit challenging. Here are some methods to accomplish this task:
These are the following methods for doing this:
Table of Content
- Using Object Tag
- Using an iframe
- Using embed tag
Method 1: Using Object Tag
- HTML’s object tag is the first way to embed PDF files. In the below example, the pdf file will be displayed on a web page, which is an object.
- In addition to embedding a PDF file into a webpage, the object tag can embed ActiveX, Flash, video, audio, and Java applets.
- Interactive documents can be attached to an object embedded with an HTML tag.
- It can be displayed according to your need on the screen by using the object’s height and width attributes.
Example 1: This example describes the embedding of a PDF file in HTML using the Object Tag.
HTML <!DOCTYPE html><html><head> <title>PDF in HTML</title></head><style> .pdf { width: 100%; aspect-ratio: 4 / 3; } .pdf, html, body { height: 100%; margin: 0; padding: 0; } h1, h3 { text-align: center; } h1 { color: green; }</style><body> <h1>GeeksforGeeks</h1> <h3>Embedding the PDF file Using Object Tag</h3> <object class="pdf" data="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf" width="800" height="500"> </object></body></html>
Output:
Method 2: Using an iframe
- Using an iframe tag is the second way to embed a pdf file in an HTML web page. In web development, web developers use the iframe tag to embed files in various formats and even other websites within a web page.
- Due to its wide compatibility, the iframe tag is widely used for embedding pdf.
- A browser that does not support PDF documents or the object tag can also use this tag to embed a pdf HTML code.
Example 2: This example describes the embedding of a PDF file in HTML using an iframe.
HTML <!DOCTYPE html><html><head> <title>PDF in HTML</title></head><style> .pdf { width: 100%; aspect-ratio: 4 / 3; } .pdf, html, body { height: 100%; margin: 0; padding: 0; } h1, h3 { text-align: center; } h1 { color: green; }</style><body> <h1>GeeksforGeeks</h1> <h3>Embedding the PDF file Using Iframe Tag</h3> <iframe class="pdf" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf" width="800" height="500"> </iframe></body></html>
Output:
Method 3: Using embed tag
- When embedding a pdf HTML code into a website, the embed tag isn’t used as often as the previous tags because if the user’s browser can’t handle PDF files, the display will be blank.
- The embed a pdf HTML code method is used when no fallback content needs to be provided.
Example: This example describes the embedding of a PDF file in HTML using the embed tag.
HTML <!DOCTYPE html><html><head> <title>PDF in HTML</title></head><style> .pdf { width: 100%; aspect-ratio: 4 / 3; } .pdf, html, body { height: 100%; margin: 0; padding: 0; } h1, h3 { text-align: center; } h1 { color: green; }</style><body> <h1>GeeksforGeeks</h1> <h3>Embedding the PDF file Using embed Tag</h3> <embed class="pdf" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf" width="800" height="500"></body></html>
Output:
Embedding PDF files in HTML documents can enhance the interactivity of your web content. You can choose from several methods, including the <object>, <iframe>, and <embed> tags, depending on your specific needs and browser compatibility requirements.
Improve
Please Login to comment...
Similar Reads
YouTube Video Embed Code Generator Tool using HTML CSS and JavaScript
In this article, we will see How to create your own YouTube Video embed code generator tool using the basics of HTML, CSS, and JavaScript. With this tool, we can create responsive embed code for responsive video output on all devices. We can make use of this tool and add the generated code in Blogger, WordPress, Wix, Google Sites, custom websites,
4 min read
HTML | DOM Embed Object
The Embed Object in HTML DOM is used to represent the <embed> element. The <embed> element can be accessed by using getElementById() method. Note: This object is new in HTML 5. Property Values: height: It sets or returns the value of the height attribute. src: It sets or returns the value of the src attribute of an Embed Object, type: I
2 min read
HTML | <embed> type Attribute
The HTML embed type Attribute contains the media_type content. It is used to specify the media type of the embedded content. Syntax: <embed type="media_type"> Attribute Values: media_type: It contains the media_type content. It is used to specify the media type of the embedded content. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt
1 min read
HTML | <embed> src Attribute
The HTML <embed> src Attribute is used to specify the web address of the embedded content. Syntax: <embed src="URL"> Attribute Values: URL: It is used to specify the web address of the embedded content.An absolute URL: It points to another webpage.A relative URL: it points to a file within a website. Example: C/C++ Code &lt;!DOCTYPE
1 min read
HTML | <embed> height Attribute
The HTML <embed> height attribute is used to specify the height of the embedded content. Syntax: <embed height = "pixels"> Attribute Values: pixels: The width value are set in terms of pixels. It is used to specify the height of embedded content. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;
1 min read
HTML | <embed> width Attribute
The HTML embed width attribute is used to specify the width of the embedded content. Syntax: <embed width="pixels"> Attribute Values: pixels: The width of embed value are set in terms of pixels. It is used to specify the width of embedded content. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;
1 min read
HTML | DOM Embed src Property
The HTML DOM Embed src Property is used to set or return the value of the src attribute in an embed element. This attribute specifies the address of the external file to embed. Syntax: Return the src property: embedObject.src Set the src property: embedObject.src = URL Property Values: URL: Specify the URL of the external file to embed. Possible Va
1 min read
HTML | DOM embed height property
The embed height property in HTML DOM is used to set or return the value of the height attribute. The height attribute defines the height of the embedded content in terms of pixels. Syntax: Return the height property:embedObject.heightSet the height property:embedObject.height = pixels Property Values: px: Specify the height in pixels of the embedd
2 min read
HTML DOM embed type property
The DOM embed height property in HTML is used to set or return the value of the type attribute in an embed element. The type attribute specifies the MIME type of the embedded content. Syntax: Return the type property:embedObject.typeSet the type property:embedObject.type = MIME_type Property Values: MIME_type: It contains a single value MIME-type w
1 min read
HTML | DOM embed width property
The DOM embed width property in HTML is used to set or return the value of the width attribute. The width attribute defines the width of the embedded content, in pixels. Syntax: Return the width property:embedObject.widthSet the width property:embedObject.width = pixels Property Values: px: Specify the width in pixels of the embedded content. Retur
2 min read
How to embed audio element in a HTML document ?
Since the release of HTML5, audio can be added to webpages using the <audio> tag. Previously audio could be only played on webpages using web plugins like Flash. The <audio> tag is an inline element which is used to embed sound files into a web page. It is a very useful tag if you want to add audio such as songs, interviews, etc on your
1 min read
How to embed PHP code in an HTML page ?
PHP is the abbreviation of Hypertext Preprocessor and earlier it was abbreviated as Personal Home Page. We can use PHP in HTML code by simply adding a PHP tag without doing any extra work. Example 1: First open the file in any editor and then write HTML code according to requirement. If we have to add PHP code then we can add by simply adding <?
2 min read
How to Embed Audio and Video in HTML?
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that tell the browser how to properly display the content on the screen. So, in this article, we will learn how to embed audio and video in HTML. In order to
4 min read
How to Embed Video in Iframe in HTML?
Engaging content necessitates the embedding of videos in web pages. It is easy to do with HTML iframes. Here we will see how to select a video source, get the embed code, understand iframe attributes, and embed your video into HTML. ApproachThe HTML document includes the basic structure with <html>, <head>, and <body> tags, defini
1 min read
How to Embed Multimedia in HTML ?
A variety of tags such as the <img> tag, <video> tag, and <audio> tag are available in HTML to include media on your web page. Multimedia combines different media, such as images, audio, and videos. Users will have a better experience when multimedia is embedded into HTML. Early web browsers only supported text and were limited to
3 min read
HTML <embed> Tag
The <embed> tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document. It is used as a container for embedding plug-ins such as Flash animations. This tag is new in HTML 5, and it requires only a starting tag. Note: Modern browsers don't support <embed>, Java
3 min read
Interact with PDF with PDF ChatBot
PDFs are widely used for sharing and viewing documents across various platforms and devices. Working with PDFs can sometimes be difficult and time-consuming, but with the AI-powered PDF assistants, we can now interact with PDF documents. These tools allow you to access various PDF functionalities through a conversational interface, making working w
5 min read
How to embed Facebook video using Google AMP ?
Adding Facebook video and comments to websites is now a popular and attractive feature in amp we easily do this by using amp-facebook component, Required Scripts: Use the following script to import amp-facebook component C/C++ Code <script async custom-element="amp-facebook" src= "https://cdn.ampproject.org/v0/amp-facebook-0.1.js
2 min read
How to add HTML and CSS into PDF File ?
HTML and CSS are regularly converted into PDF format during web development. PDFs enable the creation of printable documents, information exchange across several platforms, and preserving a webpage's original layout. Several JavaScript libraries can help us to complete our tasks. Libraries like html2pdf and jsPDF are well-known for converting webpa
3 min read
How to generate PDF file using jsPDF library ?
In most web-based projects or applications, we need report generation for showing some relevant data which includes PDF conversion. There are many PDF generation tools available from raw HTML data, CSV, or any database available. The jsPDF library is one of the generation tools commonly used in web applications. In this article, we will learn how t
3 min read
How to Download PDF File on Button Click using JavaScript ?
Sometimes, a web page may contain PDF files that can be downloaded by the users for further use. Allowing users to download the PDF files can be accomplished using JavaScript. The below methods can be used to accomplish this task. Table of Content Using html2pdf.js libraryUsing pdfmake LibraryUsing window.print() methodUsing html2pdf.js libraryFirs
5 min read
How to open PDF file in new tab using ReactJS ?
React JS, a commonly used JavaScript library for building user interfaces, sometimes requires opening PDF files in a new tab or window when a button is clicked. You can make this happen by bringing the PDF file into your React application as a module. Prerequisites:React JSFunctional Component in ReactApproach to open PDF File: To complete this tas
2 min read
How to create a table in PDF file from external text files using PHP ?
In this article, we will learn to create a table in a PDF file from an external text file with PHP by using FPDF. It is a free PHP class that contains many functions for creating and modifying PDFs. The FPDF class includes many features like page formats, page headers, footers, automatic page break, line break, image support, colors, links, and man
3 min read
How to generate PDF file and add TrueType fonts using PHP ?
In this article, we will learn how to generate PDF files and add new TrueType fonts with PHP by using FPDF. It is a free PHP class that contains many functions for creating and modifying PDFs. The FPDF class includes many features like page formats, page headers, footers, automatic page break, line break, image support, colors, links, and many more
2 min read
How to read PDF file using PHP ?
In this article, we will learn how you can show/read PDF file contents on a browser using PHP. We have to include an external PHP file named "class.pdf2text.php". Include it in the required web page using PHP. Create an HTML form, in which we can choose a PDF file from your computer and also check whether its file extension is PDF or not. Approach:
2 min read
How to generate PDF file using PHP ?
In this article, we will learn how to generate PDF files with PHP by using FPDF. It is a free PHP class that contains many functions for creating and modifying PDFs. The FPDF class includes many features like page formats, page headers, footers, automatic page break, line break, image support, colors, links, and many more. Approach: You need to dow
2 min read
How to generate PDF file from external text files using PHP ?
In this article, we will learn how to generate PDF files from external text files with PHP by using FPDF. It is a free PHP class that contains many functions for creating and modifying PDFs. The FPDF class includes many features like page formats, page headers, footers, automatic page break, line break, image support, colors, links, and many more.
5 min read
Foundation CSS Responsive Embed Sass Reference
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device. Responsive Embed: In the modern days, we access websites from various devices of different screen sizes. So it is essential
3 min read
How to Create a Google Calendar and Embed into your website ?
Google Calendar is used to quickly schedule meetings and events and also used to get reminders about upcoming activities. Calendar is designed for teams, so it is easy to share your schedule with others and create multiple calendars that you and your team can use together. Here are the steps to add a Google calendar to your website. Step 1: Go to t
1 min read
Semantic-UI | Embed
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.An embed displays the content from other websites like YouTube videos, Vimeo, Google maps, e
1 min read
Article Tags :
Trending in News
- OpenAI o1 AI Model Launched: Explore o1-Preview, o1-Mini, Pricing & Comparison
- How to Merge Cells in Google Sheets: Step by Step Guide
- How to Lock Cells in Google Sheets : Step by Step Guide
- PS5 Pro Launched: Controller, Price, Specs & Features, How to Pre-Order, and More
- #geekstreak2024 – 21 Days POTD Challenge Powered By Deutsche Bank
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, check: true }), success:function(result) { jQuery.ajax({ url: writeApiUrl + 'suggestions/auth/' + `${post_id}/`, type: "GET", dataType: 'json', xhrFields: { withCredentials: true }, success: function (result) { $('.spinner-loading-overlay:eq(0)').remove(); var commentArray = result; if(commentArray === null || commentArray.length === 0) { // when no reason is availaible then user will redirected directly make the improvment. // call to api create-improvement-post $('body').append('
'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); return; } var improvement_reason_html = ""; for(var comment of commentArray) { // loop creating improvement reason list markup var comment_id = comment['id']; var comment_text = comment['suggestion']; improvement_reason_html += `
${comment_text}
`; } $('.improvement-reasons_wrapper').html(improvement_reason_html); $('.improvement-bottom-btn').html("Create Improvement"); $('.improve-modal--improvement').hide(); $('.improvement-reason-modal').show(); }, error: function(e){ $('.spinner-loading-overlay:eq(0)').remove(); // stop loader when ajax failed; }, }); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ $('.improvement-reason-modal').hide(); } $('.improve-modal--improvement').show(); }); function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `
${suggest_val}
`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = `
Thank You!
Your suggestions are valuable to us.
You can now also contribute to the GeeksforGeeks community by creating improvement and help your fellow geeks.
`; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('
'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('
'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.improvement-reason-modal').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); });
