Home>Web design tutorial>Javascript tutorial

Web printing solution: Normal report printing function

Author：Eve Cole Update Time：2025-08-05 12:00:04

I have done many web projects. Most of the time when printing page content, I use Javascript to call the built-in printing method of the system to print, that is, call PrintControl.ExecWB(?,?) to achieve direct printing and printing preview functions. Although the printing effect and controllability are not very good, it can be used barely, and it is still OK to deal with general printing.

The code looks like this:

Code

 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->//Call PrintControl.ExecWB(?,?) to achieve direct printing and printing preview functions. (Some areas cannot be hidden directly by printing using the print() method provided by the system) //preview: Whether to display the preview. null/false: not displayed, true: display function printPage(preview){try{var content=window.document.body.innerHTML;var oricontent=content;while(content.indexOf("{$printhide}")>=0) content=content.replace("{$printhide}","style='display:none'");if(content.indexOf("ID=/"PrintControl/"")<0) content=content+"<OBJECT ID=/"PrintControl/" WIDTH=0 HEIGHT=0 CLASSID=/"CLSID:8856F961-340A-11D0-A96B-00C04FD705A2/"></OBJECT>";window.document.body.innerHTML=content;//PrintControl.ExecWB(7,1) Print preview, (1,1) Open, (4,1) Save As, (17,1) Select all, (10,1) Attributes, (6,1) Print, (6,6) Print directly, (8,1) Page settings if(preview==null||preview==false) PrintControl.ExecWB(6,1);else PrintControl.ExecWB(7,1); //OLECMDID_PRINT=7; OLECMDEXECOPT_DONTPROMPTUSER=6/OLECMDEXECOPT_PROMPTUSER=1window.document.body.innerHTML=oricontent;}catch(ex){ alert("Error executing Javascript script."); }}function printConten(preview, html){try{var content=html;var oricontent=window.document.body.innerHTML; while(content.indexOf("{$printhide}")>=0) content=content.replace("{$printhide}","style='display:none'");if(content.indexOf("ID=/"PrintControl/"")<0) content=content+"<OBJECT ID=/"PrintControl/" WIDTH=0 HEIGHT=0 CLASSID=/"CLSID:8856F961-340A-11D0-A96B-00C04FD705A2/"></OBJECT>";window.document.body.innerHTML=content;//PrintControl.ExecWB(7,1) Print preview, (1,1) Open, (4,1) Save As, (17,1) Select all, (10,1) Attributes, (6,1) Print, (6,6) Print directly, (8,1) Page settings if(preview==null||preview==false) PrintControl.ExecWB(6,1);else PrintControl.ExecWB(7,1); //OLECMDID_PRINT=7; OLECMDEXECOPT_DONTPROMPTUSER=6/OLECMDEXECOPT_PROMPTUSER=1window.document.body.innerHTML=oricontent;}catch(ex){ alert("Error executing Javascript script."); }}

The above two functions are placed in a Js file. In the page content, the content of the specified part can be printed by applying the script file and calling the further encapsulated function:

 <script language="javascript">function Print(preview) {var text = document.getElementById("content").innerHTML;printConten(preview, text);}

The printing effect is roughly shown in the figure below. If the printed page is in the frame page, you need to select the option "Print only selected frames".

Using this method does not require any controls to be installed, which has good compatibility advantages. However, the content of the report appears to be more troublesome to control. Especially for printing some reports, it is necessary to output complex content, which also has certain defects, but overall, it is also a better choice.

Later, when I needed to do some work on document set-up, this control could not be done, so I needed a method or control that could better handle the set-up.

By chance, I found a better printing control that supports printing in various formats, and also the ID set I care about. It is powerful and easy to use, and it is very recommended.

When using this control, the printing effect of a normal report is as follows:

The printing of the above two reports is actually similar, both of which are printed part of the HTML content, but the latter looks better and provides very complete report function settings.

The code is roughly as follows.

Code

 <script language="javascript">function Print(preview) {var text = document.getElementById("content").innerHTML;printConten(preview, text);}</script><script language="javascript" src="http://www.cnblogs.com/Scripts/CheckActivX.js"></script><object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> </object> <script language="javascript">var LODOP = document.getElementById("LODOP"); //This line of statement is to comply with the DTD specification CheckLodop();</script><script language="javascript" type="text/javascript">function Preview() {//Print preview CreateLicenseData();LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);LODOP.PREVIEW();};function Setup() {//Print maintenance to adjust the position for the user CreateLicenseData();LODOP.PRINT_SETUP();};function Design() {//Print the content and position of the design developer settings CreateLicenseData();LODOP.PRINT_DESIGN();};function CreateLicenseData() {LODOP.PRINT_INIT("Query Report");LODOP.ADD_PRINT_HTM(20, 40, 610, 900, document.all("content").innerHTML);LODOP.PREVIEW();}</script>

Many times, the content we don’t have is controlled by CSS, so sometimes, if we print part of HTML without these styles, the Table format and fonts that come out may change and are not very good-looking. Then you need to style HTML.

If you set a style for the printed content, the interface will be much better.

The code for setting the style is as follows.

Code

 <script language="javascript" type="text/javascript">function Preview() {//Print preview CreateLicenseData();LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);LODOP.PREVIEW();};function CreateLicenseData() {LODOP.PRINT_INIT("Application Processing Form");var strBodyStyle = "<link type='text/css' rel='stylesheet' href='http://www.cnblogs.com/Themes/Default/style.css' /><style><!--table { border:1;background-color: #CBCBCC } td {background-color:#FFFFE;border: 1; } th { background-color:#F1F1F3;padding-left:5px;border:1}--></style>";var strFormHtml = strBodyStyle + "<body>" + document.getElementById("content").innerHTML + "</body>";LODOP.ADD_PRINT_HTM(20, 40, 610, 900, strFormHtml);LODOP.PREVIEW();}</script>

The above is the ordinary report printing function of the web printing solution introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!

Related Articles