vue-print-nb打印功能

1.安装

npm install vue-print-nb --save

2.引入

main.js中引入

import print from 'vue-print-nb'
Vue.use(print);

3.使用

3.1直接打印并可配置打印头

给需要打印的容器加一个id,打印按钮传入这个id

<div id="printBox">
    内容
</div>
<button v-print="printDirect" type="primary">直接打印</button>

data() {
    return {
      printObj: {
        id: 'printBox',
        popTitle: '直接打印',
        extraCss: '',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      }
    }
},

3.2生成图片打印

转图片打印需要先安装html2Canvas和print-js

import html2canvas from 'html2canvas'  
import printJS from 'print-js'

<div ref="printContent">
    内容
</div>
<button type="primary" @click="toImg">转成图片打印</button>

 methods: {
    toImg() { 
      html2canvas(this.$refs.printContent, {
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then((canvas) => {
        let url = canvas.toDataURL()
        printJS({
          printable: url,
          type: 'image',
          documentTitle: '转图片打印'//设置打印的表头
        })
        console.log(url)
      })
    }
  }