Two ways to implement printing function in vue (with code)

This article brings you two methods (with code) about how to implement the printing function in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

The first method: Install the plug-in through npm

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

2, introduce After installation, in main.js

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

3 is introduced in the file, and it can be used now

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

4. If you need to print through the link address: window.location.href = airway_bill; airway_bill is the link address.

5. If the content is not fully printed, click More Settings during the printing operation, and then set the zoom.

Second method: Manually download the plug-in to the local

Plug-in address: https://github.com/xyl66/vuePlugs_printjs

1. Create a new folder under src plugs, put the downloaded print.js into the plugs folder, and then operate as follows

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. Note that you need to use ref to obtain the dom node. If you obtain it directly through id or class, webpack will print it after packaging and deployment. The content is empty

3. Specify the non-printing area

Method 1. Add a no-print style class

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

Method 2. Customize the class name

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

This article has ended here. For more other exciting content, you can pay attention to the JavaScript Tutorial Video column of the PHP Chinese website!

The above is the detailed content of Two ways to implement printing function in vue (with code). For more information, please follow other related articles on the PHP Chinese website!