집 >웹 프론트엔드 >JS 튜토리얼 >jquery 플러그인을 사용하여 페이지 내용을 인쇄하는 방법

jquery 플러그인을 사용하여 페이지 내용을 인쇄하는 방법

php中世界最好的语言원래의: 2018-03-15 10:54:291783검색

이번에는 jquery 플러그인이 페이지 내용을 어떻게 인쇄하는지 보여드리겠습니다. 주의사항은 무엇인가요? 다음은 실제 사례입니다.

비즈니스 시나리오고객이 페이지에 인쇄 버튼을 클릭하면 Echarts 차트의 내용과 텍스트 프롬프트 정보가 인쇄될 수 있다는 것을 발견했습니다. 구현하는 방법은 3가지 정도이고 나머지 2개는 별로 익숙하지 않은데, 사용하는 인쇄 방식은 jQuery를 기반으로 개발된 인쇄 플러그인이라 jQuery를 이용해 요소를 찾을 수 있기 때문에 이 방법을 사용하기로 결정했습니다.

먼저 다음과 같이 구현 렌더링을 살펴보세요.

구현 렌더링

js 파일 소개

<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>

참고: 여기에 jQuery가 도입된 첫 번째 파일이 있습니다. 첫 번째 js 파일이 도입되지 않으면 호환성 문제가 발생하여 jqprint를 사용하여 인쇄할 때 오류가 발생합니다.

html 페이지많은

html 태그

<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>

가 있습니다. 물론 아래에는 여기에 표시되지 않은 많은 html 태그가 있습니다.

인쇄 버튼을 클릭한 후 실행되는 함수

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');
}

참고: 여기에서는 이미지 크기 조정 방법이 사용됩니다. 예를 들어 Echarts 차트에 많은 내용을 표시해야 하는 경우 일반적으로 다시 복원하기에서 스크롤 막대를 사용합니다.

인쇄할 필요가 없는 라벨은 먼저 숨길 수 있습니다. 인쇄된 페이지에 표시될 필요가 없는 라벨 내용에 대해서는 jQuery를 사용하여 인쇄하기 전에 해당 요소를 찾고, 요소를 숨긴 다음, 인쇄 후에 숨겨진 요소를 표시합니다. 이 사례를 읽으신 후 마스터하셨으리라 믿습니다. 기사. 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!