js calls the browser to print (headers, footers, and margins can be set)
foreword
Printing requirements are very common in the development of the system. Faced with various printing format requirements of users, if there are easy-to-use printing controls, there is no need to say much about developing printing functions. But if not, it is also a good choice to directly use the printing function that comes with the browser.
Let me share some of my own experience in using the browser's own functions during the development process.
1Introduction to the printing function
1.1 Normal printing
If you want to print the content of the current web page directly on white paper, it is very simple, you can use the following js code to achieve.
window.print();
1.2 Print the specified area
1.2.1 Simple printing of an area
If you only need to simply print a certain piece of content of the current web page, it is not difficult to achieve. First make the piece to be printed get the focus, and then print, the code is as follows:
document.getElementById( ' The id of the area to be printed ' ).focus();
window.print();
1.2.2 Use css to control a certain part not to print
Of course, it is also very convenient to use css to control a certain area not to print.
The code is as follows ( the red part is the key ). This style can be displayed normally when browsing, but the elements with class noprint are not printed when printing .
<style type="text/css" media="print">
.noprint{ display : none }
</style>
1.3 sets of play
If the user already has a printed form, you only need to print the data content, which is the so-called set printing.
You can of course design a table with only data items to be printed, and then control the formatting of elements such as position and font through css . You can also hide the parts that do not need to be printed in combination with the description in 1.2.2 , which is more convenient for your print preview debugging.
1.5 iframe printing
If your printing format is more complicated, and it is more troublesome to implement the method described above on the existing page, then simply use iframe printing. Then you only need to draw a page in advance, and use js to pass the content or template page path to the iframe when you want to print .
code show as below:
window.frames[ 'printFrm' ].location.href = " Page Path " ;
setTimeout( "printAction()" , "1000" ); // In order to prevent the page from printing before loading, delay for one second
function printAction(){
window.frames['printFrm'].focus();
window.frames['printFrm'].print();
}
If you do n't want the iframe to be seen, like below, set the height to 0
<iframe style="height:0px;" id="printFrm" name="printFrm" src="">
</iframe>
Of course, if you need to control the margins, headers, footers, etc. by yourself, you can first set them as described in 1.6 .
1.6修改浏览器打印设置
在打印的时候，你可能希望由自己来控制页边距、页眉、页脚等。可以按如下方式，在打印前进行相应的设置（注：由于使用了ActiveXObject，需要进行相应的浏览器安全设置，最简单的就是把访问地址设置为“受信任的站点”）。
function setPrint(){
var hkey_root,hkey_path,hkey_key;
hkey_root="HKEY_CURRENT_USER";
hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
//设置网页打印的页眉页脚为空
try{
var RegWsh = new ActiveXObject("WScript.Shell");
//设置页眉为空
hkey_key="header" ;
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
//设置页脚为空
hkey_key="footer";
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
//设置下页边距（0）
hkey_key="margin_bottom";
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"0");
//设置左页边距（0）
hkey_key="margin_left";
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"0");
//设置右页边距（0）
hkey_key="margin_right";
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"0");
//设置上页边距（0）
hkey_key="margin_top";
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"0");
}catch(e){
alert('请将本系统地址加入"受信任的站点"，否则打印格式可能会不正确！');
}
}
当然，除此之外还有其他一些复杂的设置，后续补充…