Deux façons d'implémenter la fonction d'impression dans vue (avec code)

Le contenu de cet article concerne les deux méthodes d'implémentation de la fonction d'impression dans Vue (avec du code). J'espère que ce sera le cas. utile pour vous.

La première méthode : installez le plug-in via npm

1, installez npm install vue-print-nb --save

2, introduisez-le dans main.js après l'installation

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

3 est introduit dans le fichier, et il peut être utilisé maintenant

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

4 Si vous devez imprimer via l'adresse du lien : window.location.href. = airway_bill ; airway_bill est l’adresse du lien.

5. Si le contenu n'est pas entièrement imprimé, cliquez sur Plus de paramètres pendant l'opération d'impression, puis réglez le zoom.

Deuxième méthode : téléchargez manuellement le plug-in sur l'

Adresse du plug-in locale : https://github.com/xyl66/vuePlugs_printjs

1. Créez-en un nouveau. dossier sous src plugs, placez le print.js téléchargé dans le dossier plugs, puis procédez comme suit

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. Notez que vous devez utiliser ref pour obtenir le nœud dom si vous l'obtenez directement. via l'identifiant ou la classe, webpack le conditionnera et le déploiera. Le contenu final imprimé est vide

3 Spécifiez la zone de non-impression

Méthode 1. Ajoutez un style sans impression. class

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

Méthode 2. Personnaliser le nom de la classe

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

Cet article est terminé ici Pour un contenu plus passionnant, vous pouvez prêter attention à la Vidéo du didacticiel JavaScript<.> rubrique du site PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!