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

不言
リリース: 2019-03-20 11:36:18
転載
8705 人が閲覧しました

この記事では、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 &#39;@/plugs/print&#39;
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 サイトの他の関連記事を参照してください。

関連ラベル:
vue
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート