Maison > interface Web > js tutoriel > Deux façons d'implémenter la fonction d'impression dans vue (avec code)

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

不言
Libérer: 2019-03-20 11:36:18
avant
8764 Les gens l'ont consulté

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);  //注册
Copier après la connexion

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>
Copier après la connexion

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 &#39;@/plugs/print&#39;
Vue.use(Print) // 注册
<template>
  <section ref="print">
    打印内容
    <div class="no-print">不要打印我</div>
  </section>
</template>
this.$print(this.$refs.print) // 使用
Copier après la connexion

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>
Copier après la connexion

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;}) // 使用
Copier après la connexion

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!

Étiquettes associées:
vue
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal