VUE -- use VUE print NB to realize printing function

1, Install Vue print NB

There are no preconditions. You can install it directly, but because vue2 0 and vue3 0 has different usages, so the versions to be installed are also different. Please choose by yourself.

Vue2. Version 0 installation method:

npm install vue-print-nb --save

Vue3. Version 0 installation method:

npm install vue3-print-nb --save

2, Introducing Vue projects

Vue2.0 import method:

// 1. Global mount
import Print from 'vue-print-nb'
Vue.use(Print)

// or

// 2. User defined instructions
import print from 'vue-print-nb'
directives: {
  print
}

Vue3.0 import method:

// 1. Global mount
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

// or 

// 2. User defined instructions
import print from 'vue3-print-nb'

directives: {
    print   
}

3, Parameter description

parameter	effect	type	Optional	Default value
id	Local print valid, identifier	String	-	'printId'
standard	Local printing is valid, the type of text to be printed	String	HTML5/loose/strict	HTML5
extraHead	Local printing is effective and is added at the top of the printing area	String	-	-
extraCss	Local printing is effective, and a Stylesheet style sheet is provided for the printing area	String	-	-
popTitle	Partial printing is effective. Edit the header title	String	-	Document Title
clickMounted	Globally valid, call the button of v-print binding and click the event callback	Function	-	this.Object
openCallback	Globally valid, call the callback during printing	Function	-	this.Object
closeCallback	Globally valid, call the callback to close printing (unable to distinguish confirmation or cancellation)	Function	-	this.Object
beforeOpenCallback	Globally valid, call the callback before printing	Function	-	this.Object
preview	Globally valid, control print preview	Boolean	true/false	false
previewTitle	Edit the preview title of the preview page	String	-	'Print Preview'
previewPrintBtnLabel	Edit the print button text of the preview page	String	-	"Print"
previewBeforeOpenCallback	Call the callback before opening the preview page	Function	-	this.Object
previewOpenCallback	Call the callback after opening the preview page	Function	-	this.Object
url	Non local printing is effective. Print the specified URL to ensure the same origin policy	String	-	-
asyncUrl	Non local printing is effective. The specified URL is loaded and printed asynchronously to ensure the same origin policy	Function	-	-
zIndex	The preview is valid. The z-index of the preview window is 20002 by default. It is better to be higher than the default value	String，Number	-	20002

4, Apply

template example:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    // Partial print text and buttons
    <div id="printArea">Print Area</div>
    <button v-print="print">Print!</button>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

script example:

export default {
  name: 'HelloWorld',
  data () {
    let that = this
    return {
      msg: 'Welcome to Your Vue.js App',
      print: {
        id: 'printArea',
        popTitle: 'Configure header title', // Print the title above the configuration page
        extraHead: 'Print', // The uppermost header text, additional tags attached to the head tag, separated by commas
        preview: true, // Whether to start preview mode. The default is false
        previewTitle: 'Preview title', // Print preview title
        previewPrintBtnLabel: 'Preview ends and printing begins', // Print the button text below the preview title. Click to enter printing
        zIndex: 20002, // The z-index of the preview window is 20002 by default, which is better than the default value
        previewBeforeOpenCallback () { console.log('Loading preview window!'); console.log(that.msg, this) }, // callback before preview window opens
        previewOpenCallback () { console.log('The preview window has been loaded, and the preview opens!') }, // callback when preview window opens
        beforeOpenCallback () { console.log('Before printing!') }, // callback before starting printing
        openCallback () { console.log('Print out!') }, // Call back when printing
        closeCallback () { console.log('Print tool closed!') }, // Close the printed callback (unable to distinguish confirmation or cancellation)
        clickMounted () { console.log('click v-print Bound button!') },
        // url: 'http://localhost:8080/ ', / / print the specified URL to ensure the same origin policy
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      }
    }
  }
}

5, Attention

• In the Callback function, this points to the current print object, and that returns the Vue object;
• You don't need a header or footer. You can cancel the selection in more settings of the print pop-up page;
• Do not set the popTitle parameter. The header title is undefined;
• When the popTitle parameter is empty, the header title defaults to Document Title.