So drucken Sie Seiteninhalte mit dem JQuery-Plug-In

Dieses Mal zeige ich Ihnen, wie das JQuery-Plugin den Seiteninhalt druckt. Was ist zu beachten? . Werfen wir einen Blick darauf.

Geschäftsszenario

Der Kunde muss eine Schaltfläche zum Drucken auf der Seite haben. Nach dem Klicken werden der Inhalt des Echarts-Diagramms und der Text angezeigt Durch die Google-Suche wurde festgestellt, dass es ungefähr drei Implementierungsmethoden gibt, die anderen beiden sind nicht bekannt, und die verwendete Druckmethode ist ein auf jQuery basierendes Druck-Plugin, sodass Sie jQuery zum Suchen von Elementen verwenden können. Also habe ich mich für diesen Weg entschieden.

Werfen wir zunächst einen Blick auf die Implementierungs-Renderings, wie folgt:

Implementierungs-Renderings

JS-Datei vorstellen

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

Hinweis: Hier ist die zuerst importierte jQuery-Datei. Wenn nicht, treten beim Einführen der ersten js-Datei Kompatibilitätsprobleme auf, die beim Drucken mit jqprint zu einem Fehler führen.

HTML-Seite

Es gibt viele

HTML-Tags

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

Natürlich Unten gibt es auch viele HTML-Tags, die hier nicht angezeigt werden.

Funktion wird ausgeführt, nachdem auf die Schaltfläche „Drucken“ geklickt wurde

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

Hinweis:

Hier kommt die Bildskalierungsmethode zum Einsatz. Wenn das Echarts-Diagramm beispielsweise viele Inhalte anzeigen muss, wird im Allgemeinen die Bildlaufleiste verwendet. Stellen Sie es einfach wieder her.

Alle Etiketten, die nicht gedruckt werden müssen, können zunächst ausgeblendet werden. Für Etiketteninhalte, die nicht auf der gedruckten Seite erscheinen müssen, verwenden wir jQuery, um das entsprechende Element vor dem Drucken zu finden, das Element auszublenden und das ausgeblendete Element nach dem Drucken anzuzeigen

Ich glaube, Sie haben diesen Artikel gelesen Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie jQuery die Seite ausführt, um standardmäßig Klickereignisse auszulösen

In jquery So verwenden Sie on und klicken

So übergeben Sie Parameter zwischen Fenstern im Laui-Popup-Fenster

Das obige ist der detaillierte Inhalt vonSo drucken Sie Seiteninhalte mit dem JQuery-Plug-In. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!