jqueryプラグインを使用してページコンテンツを印刷する方法

今回は、jquery プラグインがページのコンテンツを印刷する方法について説明します。以下は実際的なケースです。

ビジネスシナリオ顧客はページ上に印刷ボタンが必要で、それをクリックすると、Echartsチャートの内容とテキストプロンプト情報が印刷できることがわかりました。の実装方法が3つほどあり、残りの2つはあまり馴染みがないことと、印刷方法がjQueryをベースに開発された印刷プラグインなので、jQueryを使って要素を見つけることができるので、これにしました。この方法を使用します。

まず、次のような実装レンダリングを見てください:

実装レンダリング

js ファイルの紹介

<script></script>
<script></script>

注: ここにjQueryが最初に導入されたファイルがあります。最初の js ファイルが導入されていない場合、互換性の問題が発生し、jqprint を使用して印刷するときにエラーが発生します。

htmlページたくさんの

htmlタグがあります

<p>
 </p>

                                                                                                                     

用户信息
姓名：	18030632605
性别：	男
年龄：	41
身份证：	52272419770101059X
所属机构：	上海市政法委

 ......  打 印 もちろん、ここには示されていない多くのHTMLタグが以下にあります。

印刷ボタンをクリックした後に実行される機能

function btnPrintClick(){
 var imgBox = $('#img_box');
 var chartBox = $('#main');
 if (imgBox.length 

');   imgBox = $('#img_box');  }  // 将echart生成图片并放入img-box，并显示图片img-box  imgBox.html('').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 ');   imgBox2 = $('#img_box2');  }  // 将echart生成图片并放入img-box，并显示图片img-box  imgBox2.html('').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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery実行ページでデフォルトでクリックイベントをトリガーする方法

jqueryでの使用とクリックの方法

layuiのウィンドウ間でパラメータを渡す方法ポップアップウィンドウ

以上がjqueryプラグインを使用してページコンテンツを印刷する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。