How to print page content with jquery plug-in

This time I will show you how the jquery plug-in prints the page content. How the jquery plug-in prints the page content. What are the precautions? The following is a practical case, let’s take a look.

Business Scenario

The customer needs to have a print button on the page. After clicking it, the content of the Echarts chart and the text prompt information can be printed. Through Google Search found that there are about three implementation methods, the other two are not familiar, and the printing method used is a print plug-in developed based on jQuery, so you can use jQuery to find elements, so I decided to use this way.

Let’s take a look at the implementation renderings, as follows:

Implementation renderings

Introducing 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 introduced first. If the jQuery file is not introduced first, If there is a js file, there will be compatibility issues, resulting in an error when printing using jqprint.

html page

There are html tags inside There are many

<p class="wrap-content container" id="container">
 <table border="0" cellpadding="0" cellspacing="0" class="store-joinin baseinfo">
  <thead>
   <tr>
    <th colspan="40">用户信息</th>
   </tr>
  </thead>
  <tbody>
   <tr style="background: rgb(255, 255, 255);">
    <th>姓名：</th>
    <td colspan="40">18030632605</td>
   </tr>
   <tr style="background: rgb(255, 255, 255);">
    <th>性别：</th>
    <td colspan="40">男</td>
   </tr>
   <tr style="background: rgb(255, 255, 255);">
    <th>年龄：</th>
    <td colspan="40">41</td>
   </tr>
   <tr style="background: rgb(255, 255, 255);">
    <th>身份证：</th>
    <td colspan="40">52272419770101059X</td>
   </tr>
   <tr style="background: rgb(255, 255, 255);">
    <th>所属机构：</th>
    <td colspan="40">上海市政法委</td>
   </tr>
  </tbody>
  </table>
 ......
 <button class="btn btn-danger printBtn1" onclick="btnPrintClick()" type="button">打 印</button>

Of course there are also below Many html tags are not shown here.

Function executed after the print button is clicked

function btnPrintClick(){
 var imgBox = $('#img_box');
 var chartBox = $('#main');
 if (imgBox.length <= 0) {
  chartBox.after(&#39;<p id="img_box"></p>');
  imgBox = $('#img_box');
 }
 // 将echart生成图片并放入img-box，并显示图片img-box
 imgBox.html('< img src="&#39; + myChart.getDataURL() + &#39;"/>').css('display','block');
 // 隐藏echart图chart-box
 chartBox.css('display','none');
 // 调整img大小
 var img = imgBox.find('img');
 var imgWidth = img.width();
 var showWidth = 1000; // 显示宽度，即图片缩小到的宽度
 if (imgWidth > showWidth) { // 只有当图片大了才缩小
  var imgNewHeight = img.height() / (imgWidth / showWidth);
  img.css({'width': showWidth + 'px', 'height': imgNewHeight + 'px'});
 }
 var imgBox2 = $('#img_box2');
 var chartBox2 = $('#main2');
 if (imgBox2.length <= 0) {
  chartBox2.after(&#39;<p id="img_box2"></p>');
  imgBox2 = $('#img_box2');
 }
 // 将echart生成图片并放入img-box，并显示图片img-box
 imgBox2.html('< img src="&#39; + myChart2.getDataURL() + &#39;"/>').css('display','block');
 // 隐藏echart图chart-box
  chartBox2.css('display','none');
 // 调整img大小
 var img2 = imgBox2.find('img');
 var img2Width = img2.width();
 var show2Width = 1000; // 显示宽度，即图片缩小到的宽度
 if (img2Width > show2Width) { // 只有当图片大了才缩小
  var img2NewHeight = img2.height() / (img2Width / show2Width);
  img2.css({'width': show2Width + 'px', 'height': img2NewHeight + 'px'});
 }
 // 打印
 $("#TestQuestions").jqprint();
 // 执行打印后再切换回来
 // 显示echart图chart-box
 chartBox.css('display','block');
 chartBox2.css('display','block');
 // 隐藏图片img-box
 imgBox.css('display','none');
 imgBox2.css('display','none');
}

Notes:

The image scaling method is used here. For example, if the Echarts chart needs to display a lot of content, generally the scroll bar is used on the Just restore it again.

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

I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How jQuery runs the page to trigger click events by default

In jquery How to use on and click

How to pass parameters between windows in the layui pop-up window

The above is the detailed content of How to print page content with jquery plug-in. For more information, please follow other related articles on the PHP Chinese website!