Use the jqprint plug-in to print the page content.

Use the jqprint plug-in to print the page content.

Business scenarios

The customer needs to have a print button on the page and click it to print the content of the Echarts chart and text prompt information. Google search found that there are about three implementation methods, and the other two are not familiar with them, this printing method is basically a print plug-in developed by jQuery. Therefore, you can use jQuery to find elements. Therefore, this method is decided.

The implementation is as follows:

Implementation

Introduce js files

<script type="text/javascript" src="__JS__/jquery-migrate-1.2.1.min.js"></script><script type="text/javascript" src="__JS__/jqprint-0.3.js"></script>

Note:Here is the jQuery file first introduced. If the first js file is not introduced, there will be compatibility issues, leading to an error when printing with jqprint.

Html page

There are many html tags.

<Div class = "wrap-content container" id = "container"> <table border = "0" cellpadding = "0" cellspacing = "0" class = "store-joinin baseinfo "> <thead> <tr> <th colspan =" 40 "> User Information </th> </tr> </thead> <tbody> <tr style =" background: rgb (255,255,255); "> <th> name: </th> <td colspan =" 40 "> 18030632605 </td> </tr> <tr style =" background: rgb (255,255,255); "> <th> Gender: </th> <td colspan =" 40 "> male </td> </tr> <tr style =" background: rgb (255,255,255); "> <th> Age: </th> <td colspan =" 40 "> 41 </td> </tr> <tr style =" background: rgb (255,255,255); "> <th> ID card: </th> <td colspan =" 40 "> 52272419770101059X </td> </tr> <tr style =" background: rgb (255,255,255); "> <th> institution: </th> <td colspan = "40"> Shanghai Municipal Political and Legal Commission </td> </tr> </tbody> </table> ...... <button class = "btn-danger printBtn1" onclick = "btnPrintClick ()" type = "button"> Print </button>

Of course, there are many html tags that will not be displayed here.

Print the function that is executed after the button is clicked

Function btnPrintClick () {var imgBox =$ ('# img_box'); var chartBox =$ ('# main'); if (imgBox. length <= 0) {chartBox. after ('<div id = "img_box"> </div>'); imgBox =$ ('# img_box ');} // generate an echart and place it in img-box. Then, the img-box imgBox.html (' 'info.css ('display', 'block'); // hide the echart chart-box chartBox.css ('display', 'None '); // adjust the img size var img = imgBox. find ('img '); var imgWidth = img. width (); var showWidth = 1000; // display width, that is, the image width reduced to if (imgWidth> showWidth) {// The var imgNewHeight = img is reduced only when the image size is large. height ()/(imgWidth/showWidth); img.css ({'width': showWidth + 'px ', 'height': imgNewHeight + 'px '});} var imgBox2 = $ ('# img_box2'); var chartBox2 = $ ('# main2'); if (imgBox2.length <= 0) {chartBox2.after ('<div id = "img_box2"> </div>'); imgBox2 = $ ('# img_box2 ');} // generate an echart and place it in img-box. Then, the img-box imgBox2.html image is displayed (' 'info.css ('display', 'block'); // hide the echart chart-box chartBox2.css ('display', 'None '); // adjust the img size var img2 = imgBox2.find ('img '); var img2Width = img2.width (); var show2Width = 1000; // display width, that is, the image width reduced to if (img2Width> show2Width) {// The var img2NewHeight = img2.height ()/(img2Width/show2Width) is reduced only when the image size is large ); img2.css ({'width': show2Width + 'px ', 'height': img2NewHeight + 'px'});} // Print $ ("# TestQuestions "). jqprint (); // switch back after printing; // display the echart chart-box chartBox.css ('display', 'block'); chartBox2.css ('display ', 'block'); // hide the image img-box imgBox.css ('display', 'None'); imgBox2.css ('display', 'None ');}

Note:

The image scaling method is used here. For example, if an Echarts chart needs to display a large amount of content, the scroll bar is usually used on the X axis on the html page, but the Echarts chart can be converted into an image first when printing, and then scale the proportion. After printing, restore the image.

Any labels that do not need to be printed can be hidden first. For the label content that does not need to appear on the print page, we use jQuery to find the corresponding element before printing, hide the element, after printing, then, display the hidden elements.

Attribute

• Debug: false, // if it is true, the iframe display effect can be displayed (iframe defaults to very small height and width, and can be adjusted in the source code). The default value is false.
• ImportCSS: true, // true indicates that the css of the original page is imported. The default value is true. (If it is true, $ ("link [media = print]") is first found. If it is not true, the css file in $ ("link") is not found)
• PrintContainer: true, // indicates that if the selected object must be included in the print (Note: setting it to false may break your CSS rules ).
• OperaSupport: false // indicates that if the plug-in must also support the operabrowser, it provides a temporary print tab. The default value is true.
  

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.