vue で印刷機能を実装する 2 つの方法 (コード付き)

この記事では、Vue で印刷機能を実装する方法について 2 つの方法 (コード付き) を紹介します。一定の参考値があります。必要な友人は参照してください。お役に立てば幸いです。あなた、助けます。

最初の方法: npm

1 を介してプラグインをインストールし、npm install vue-print-nb --save

2 をインストールします。インストール後、メインに導入します。 .js

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

3 がファイルに導入されており、

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

4 で使用できるようになります。リンク アドレスから印刷する必要がある場合: window.location.href = airway_bill; airway_billはリンクアドレスです。

5. コンテンツが完全に印刷されない場合は、印刷操作中に [詳細設定] をクリックし、ズームを設定します。

2 番目の方法: プラグインをローカルに手動でダウンロードします。

プラグイン アドレス: https://github.com/xyl66/vuePlugs_printjs

1. src plugs の下に新しいフォルダーを作成し、ダウンロードした print.js を plugs フォルダーに配置し、次のように操作します。

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. dom ノードを取得するには ref を使用する必要があることに注意してください。 ID またはクラス、webpack はパッケージ化と展開後にそれを出力します。コンテンツは空です。

3. 非印刷領域を指定します。

方法 1. 非印刷スタイル クラスを追加します。

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

方法 2. クラス名をカスタマイズする

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

この記事はここで終了です。その他の興味深いコンテンツについては、次の JavaScript チュートリアル ビデオ 列に注目してください。 PHP中国語ウェブサイトです！

以上がvue で印刷機能を実装する 2 つの方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。