js calls iframe to implement the method of printing page content

Home

Web Front-end

JS Tutorial

js calls iframe to implement the method of printing page content_jquery

May 16, 2016 pm 04:57 PM

iframe js

1. Program description

1) This program can select an area on the page to print and print in iframe mode;
2) The difference from the original print() is that it cancels printing The content of the currently visited page can be completely retained after the page.

2. Code part

1) JS function:

Copy code The code is as follows:

function do_print(id_str)//id-str print area id
{
var el = document.getElementById(id_str);
var iframe = document.createElement('IFRAME');
var doc = null;
iframe.setAttribute(' style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow. document;
//Introducing the proprietary CSS style for printing, www.111Cn.net modifies it according to the actual situation
doc.write("<LINK rel="stylesheet" type="text/css" href="css /print.css">");
doc.write('<div>' el.innerHTML '</div>');
doc.close();
iframe.contentWindow .focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
 document.body.removeChild(iframe) ;
}
}

2) HTML:

Copy code The code is as follows:

//Print area: 
<div id="print_box">
......
</div>
// Call print
<button onclick="javascript:do_print( 'print_box');">Print</button>

3. Test

Click the print button on the page to test printing;

In addition to the above method, we can also use jquery to implement the example. The code is as follows:

Copy the code The code is as follows:

$("div#myPrintArea").printArea();

});
});
</script>
<input id="biuuu_button" type="button" value="Print"></input>
<div id="myPrintArea">.....Text printing part....</div>

If you want to achieve area printing, we can try the following method

The following article shares a super simple method to realize the printing function of the page. It can not only print the entire page, but also print a certain area of the page

Copy code The code is as follows:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function printdiv(printpage ){
 var headstr="<html><head><title></title></head><body>";
 var footstr="</body>" ;
 var newstr=document.all.item(printpage).innerHTML;
 var oldstr=document.body.innerHTML;
 document.body.innerHTML=headstr newstr footstr;
 window.print( ); 
 document.body.innerHTML=oldstr;
 return false;
}
</script>
<title>div print</title>
</ head>
<body>
<input type="button" onClick="printdiv('div_print');" value=" print">
<div id="div_print"> ;
<h1 style="Color:Red">Print area: www.jb51.net</h1>
</div>
This area cannot be printed! 
</body>
</html>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn