How to Print Iframe Content using Jquery?

By Hardik Savani | May 16, 2020 | Category : Javascript jQuery


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. if you want to see example of print iframe content using jquery then you are a right place. you will learn jquery print iframe pdf file. You just need to some step to done javascript print pdf file iframe.

Here, i will give you very simple example how to print iframe content using jquery and javascript. if you open html code or pdf file on your iframe then you can simply print it using jquery.

You can can see bellow solution and bellow full example that will help you.

Solution:

var myIframe = document.getElementById("ipdf").contentWindow;

myIframe.focus();

myIframe.print();

return false;

Example:

make sure you have mypdf.pdf file on your location so it will display in iframe.

So, please keep one file there.

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

<head>

<title>How to print iframe content using jquery - ItSolutionStuff.com</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

<button>Print</button>

<iframe id="ipdf" src="NHPFORMTEST.pdf" width="880" height="900"></iframe>

</body>

<script type="text/javascript">

$("button").click(function(){

var myIframe = document.getElementById("ipdf").contentWindow;

myIframe.focus();

myIframe.print();

return false;

});

</script>

</html>

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: