The first method: install the plug-in via NPM

1, NPM install vue-print-nb –save

2, import after the installation, import in the main.js file

The import Print from 'vue - Print - nb vue. Use (Print); / / registerCopy the code

3. It’s ready to use now

<div id="printTest" > <p> <p> <p> <p> <div > <button v-print="'#printTest'">Copy the code

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

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

The second method: manually download the plug-in to the local

Plug-in address:

https://github.com/xyl66/vuePlugs_printjs
Copy the code

1. Create a new folder under SRC, put the downloaded print.js in my plugs folder, and then do the following

Import Print from '@/ Print 'vue.use (Print) // Register <template> <section ref=" Print "> Print content <div Class ="no-print"> </div> </section> </template> this.$print(this.$refs.print) // useCopy the code

2. You need to use ref to obtain the DOM node. If you obtain the DOM node directly by ID or class, the printed content is empty after the WebPack is packaged and deployed

3. Specify the area not to print

Method 1. Add a no-print style class

<div class="no-print"> </div>Copy the code

Method 2. Customize the class name

< div class = "do - not - print - me - XXX" > don't print me < / div > enclosing $print (this. $refs. Print, {' no - print ':' do - not - print - me - XXX '}) / / useCopy the code