How to print Iframe content using jQuery?

Hariom Prajapati

30 Jun 2022

JQuery

In this tutorial we will learn how to print iframe content using jQuery.

Here we will use contentWindow to print iframe content using jQuery.

solution

var printIframe = document.getElementById("iframePdf").contentWindow;
    printIframe .focus();
    printIframe .print();
    return false;

Example -

First of all you need to make sure that you have pdfFile.pdf on location so it display on iframe.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>print iframe content using jquery</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <button>Print it</button>
    <iframe id="iframePdf" src="pdfFile.pdf" width="880" height="900"></iframe>
</body>

<script type="text/javascript">
    $("button").click(function () {
        var printIframe = document.getElementById("iframePdf").contentWindow;
        printIframe.focus();
        printIframe.print();
        return false;
    });
</script>

</html>

Comments 0