Zwei Möglichkeiten, die Druckfunktion in Vue zu implementieren (mit Code)

Der Inhalt dieses Artikels befasst sich mit den beiden Methoden zur Implementierung der Druckfunktion in Vue (mit Code). Ich hoffe, dass dies der Fall ist nützlich für Sie.

Die erste Methode: Installieren Sie das Plug-In über npm

1, installieren Sie npm install vue-print-nb --save

2, führen Sie es in main.js ein Nach der Installation wurde

   import Print from 'vue-print-nb'
  　　Vue.use(Print);  //注册

3 in die Datei eingeführt und kann jetzt verwendet werden

<div id="printTest" >
　　　　　　<p>明月照于山间</p>
　　　　　　<p>清风来于江上 </p>
　　　　</div>
　　　　<button v-print="&#39;#printTest&#39;">打印</button>

4. Wenn Sie über die Linkadresse drucken müssen: window.location.href = airway_bill; ist die Linkadresse.

5. Wenn der Inhalt nicht vollständig gedruckt wird, klicken Sie während des Druckvorgangs auf Weitere Einstellungen und stellen Sie dann den Zoom ein.

Zweite Methode: Laden Sie das Plug-in manuell auf die lokale

Plug-in-Adresse herunter: https://github.com/xyl66/vuePlugs_printjs

1. Erstellen Sie ein neues Ordner unter src plugs, legen Sie die heruntergeladene print.js in den Plugs-Ordner und gehen Sie dann wie folgt vor:

import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
　　<section ref="print">
　　　　打印内容
　　　　<div class="no-print">不要打印我</div>
　　</section>
</template>
this.$print(this.$refs.print) // 使用

2. Beachten Sie, dass Sie ref verwenden müssen, um den Dom-Knoten abzurufen, wenn Sie ihn direkt über id erhalten oder Klasse, Webpack druckt ihn nach dem Packen und Bereitstellen. Der Inhalt ist leer

3. Geben Sie den nicht druckbaren Bereich an

Methode 1. Fügen Sie keine Druckstilklasse hinzu

<div class="no-print">不要打印我</div>

Methode 2. Passen Sie den Klassennamen an

<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{&#39;no-print&#39;:&#39;.do-not-print-me-xxx&#39;}) // 使用

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Tutorial-Video des PHP-Chinesisch Webseite!

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, die Druckfunktion in Vue zu implementieren (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!