How to Print Content from an Iframe Using jQuery and JavaScript

By: Tutorial Tools Js, Ajax, Jquery February 28, 2025

Hi Dev, Today, i would like to show you how to print iframe content using javascript. In this article, we will implement a jquery print iframe content only.

How to Print Content from an Iframe Using jQuery and JavaScript Image

Hello Developers!

In this post, I’ll guide you through the process of printing content from an iframe using jQuery and JavaScript. Whether you’re displaying an HTML page or a PDF file within an iframe, this tutorial will show you how to easily print that content. By the end of this article, you’ll have a clear understanding of how to implement this functionality in your projects.

Let’s dive right in!

How to Print Iframe Content Using jQuery

Printing the content of an iframe is a common requirement, especially when dealing with embedded PDFs or HTML documents. Below, I’ll provide a simple solution and a complete example to help you achieve this.

Solution

To print the content of an iframe, you can use JavaScript to access the iframe’s content window and trigger the print functionality. Here’s how you can do it:

var myIframe = document.getElementById("ipdf").contentWindow;
myIframe.focus(); // Focus on the iframe
myIframe.print(); // Trigger the print dialog

This code snippet focuses on the iframe and opens the browser’s print dialog for its content.

Full Example

Here’s a complete example to demonstrate how to print the content of an iframe when a button is clicked. Make sure you have a PDF file (e.g., mypdf.pdf) in the same directory as your HTML file to display it in the iframe.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Iframe Content Using jQuery - Easy Tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <button>Print Iframe Content</button>
    <iframe id="ipdf" src="mypdf.pdf" width="880" height="900"></iframe>

    <script type="text/javascript">
        $("button").click(function(){
            var myIframe = document.getElementById("ipdf").contentWindow;
            myIframe.focus(); // Focus on the iframe
            myIframe.print(); // Trigger the print dialog
            return false;
        });
    </script>
</body>
</html>

How It Works

  1. Iframe Setup: The <iframe> element is used to embed a PDF file (mypdf.pdf) in the webpage.
  2. Button Click Event: When the "Print Iframe Content" button is clicked, the jQuery script accesses the iframe’s content window.
  3. Print Functionality: The focus() method ensures the iframe is in focus, and the print() method opens the print dialog for the iframe’s content.

Key Points to Remember

  • Ensure the PDF or HTML file you want to display in the iframe is accessible in the specified location.
  • This method works for both HTML and PDF content displayed in an iframe.
  • You can customize the iframe’s dimensions (width and height) as per your requirements.

Conclusion

Printing the content of an iframe is a straightforward process with jQuery and JavaScript. By following the steps and example provided above, you can easily implement this functionality in your web projects. Whether you’re working with PDFs or HTML content, this solution will help you achieve your goal.

I hope this tutorial was helpful! If you have any questions or suggestions, feel free to leave a comment below. Happy coding! 🚀

Tags

Jquery

Ajax

Ajax

Do you Like?