VUE -- use VUE print NB to realize printing function

Posted by alvinshaffer on Wed, 12 Jan 2022 05:04:28 +0100

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

parametereffecttypeOptionalDefault value
idLocal print valid, identifierString-'printId'
standardLocal printing is valid, the type of text to be printedStringHTML5/loose/strictHTML5
extraHeadLocal printing is effective and is added at the top of the printing areaString--
extraCssLocal printing is effective, and a Stylesheet style sheet is provided for the printing areaString--
popTitlePartial printing is effective. Edit the header titleString-Document Title
clickMountedGlobally valid, call the button of v-print binding and click the event callbackFunction-this.Object
openCallbackGlobally valid, call the callback during printingFunction-this.Object
closeCallbackGlobally valid, call the callback to close printing (unable to distinguish confirmation or cancellation)Function-this.Object
beforeOpenCallbackGlobally valid, call the callback before printingFunction-this.Object
previewGlobally valid, control print previewBooleantrue/falsefalse
previewTitleEdit the preview title of the preview pageString-'Print Preview'
previewPrintBtnLabelEdit the print button text of the preview pageString-"Print"
previewBeforeOpenCallbackCall the callback before opening the preview pageFunction-this.Object
previewOpenCallbackCall the callback after opening the preview pageFunction-this.Object
urlNon local printing is effective. Print the specified URL to ensure the same origin policyString--
asyncUrlNon local printing is effective. The specified URL is loaded and printed asynchronously to ensure the same origin policyFunction--
zIndexThe preview is valid. The z-index of the preview window is 20002 by default. It is better to be higher than the default valueString´╝î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.

Topics: Javascript Front-end Vue Vue.js