So drucken Sie Seiteninhalte mit jqprint

qprint ist ein kleines Plug-in zum Drucken von Seiten, das auf JQuery basiert, aber ich muss zugeben, dass dieses Plug-in wirklich leistungsstark ist. Der folgende Artikel stellt hauptsächlich vor, wie man das jqprint-Plug-in zum Drucken von Seiteninhalten verwendet wird benötigt. Freunde können sich darauf beziehen und mir folgen, um gemeinsam zu lernen.

Geschäftsszenario

Der Kunde benötigt eine Schaltfläche zum Drucken auf der Seite. 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 entwickeltes 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 wird die jQuery-Datei zuerst importiert, falls nicht importiert Wenn eine js-Datei vorhanden ist, treten Kompatibilitätsprobleme auf, die beim Drucken mit jqprint zu einem Fehler führen.

HTML-Seite

Es sind viele HTML-Tags drin

<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 gibt es darunter viele HTML-Tags wird hier nicht angezeigt.

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

Hinweis:

Hier wird die Bildskalierungsmethode verwendet. Wenn das Echarts-Diagramm beispielsweise viele Inhalte anzeigen muss, wird im Allgemeinen die Bildlaufleiste verwendet, um es einfach erneut wiederherzustellen.

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.

Attribute

• debug: false, //Wenn true, kann der Iframe-Anzeigeeffekt angezeigt werden (Iframe-Standardwerte). zu hoch Die Breite und Breite sind sehr klein und können im Quellcode erhöht werden. Der Standardwert ist false

• importCSS: true, // true bedeutet, dass das CSS der Originalseite importiert wird , der Standardwert ist wahr. (Wenn es wahr ist, wird zuerst nach $("link[media=print]") gesucht, wenn nicht, wird nach der CSS-Datei in $("link") gesucht)

• printContainer: true, //Gibt an, ob das ursprünglich ausgewählte Objekt beim Drucken berücksichtigt werden muss (Hinweis: Wenn Sie es auf „false“ setzen, verstoßen Sie möglicherweise gegen Ihre CSS-Regeln).

• operaSupport: false //Gibt an, dass das Plug-in, wenn es auch den Opera-Browser unterstützen muss, in diesem Fall die Erstellung einer temporären Druckregisterkarte ermöglicht. Der Standardwert ist wahr

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie implementiert requireJS einen Modullader?

Implementierung des MVVM-Frameworks in js (ausführliches Tutorial)

Erklärung des Scope-Bereichs in AngularJS

So erreichen Sie eine leistungsstarke Ladereihenfolge in Javascript

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