Home > Developer > JavaScript
Js calls iframe to print page content
This article describes how to use js to call iframe to print page content. For more information, see
1. program description
1) This program can print the selected area on the page in iframe mode;
2) The difference with print () in the original ecology is that the content of the current access page can be completely retained after the page is canceled.
2. Code
1) JS functions:
The Code is as follows:
Function do_print (id_str) // id-str prints the Region 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.content+doc ument;
// Introduce the printed private CSS style, www.111Cn.net according to the actual Modification
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:
The Code is as follows:
// Print area:
<Div id = "print_box">
......
</Div>
// Call Printing
<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 for example. The Code is as follows:
The Code is as follows:
<Script type = "text/javascript" src = "jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "jquery. PrintArea. js"> </script>
<Script>
$ (Document). ready (function (){
$ ("Input # biuuu_button"). click (function (){
$ ("Div # myPrintArea"). printArea ();
});
});
</Script>
<Input id = "biuuu_button" type = "button" value = "print"> </input>
<Div id = "myPrintArea">... print text... </div>
If you want to implement area printing, try the following method:
In this article, we will share a simple method to print a page, which not only prints the entire page, but also prints a certain area of the page.
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 = "
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"> printed area: www.jb51.net
</Div>
This area cannot be printed!
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
