vue实现转图片打印

首先安装两个插件
npm install --save html2canvas
npm install print-js --save
1，设置打印区域ref

<div v-loading="loading2" ref="printContent">

2，引入插件 转图片打印需要先安装html2Canvas和print-js

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

3,js

 toImg() { // 转图片打印
      html2canvas(this.$refs.printContent,{
                allowTaint: false,
                useCORS: true,
                height: this.$refs.printContent.outerHeight,
                width: this.$refs.printContent.outerWidth,
                windowWidth: document.body.scrollWidth,
                windowHeight: document.body.scrollHeight,
                
            }).then((canvas) => {
        // let url = canvas.toDataURL('image/jpeg', 1.0)
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: '打印图片'
        })
      
      })
    },

4,单纯的打印,与html2canvas不同的是，这里的printCons要设置为id而不是ref

goPrint(){
                console.log('打印')
                printJS({
                    printable: 'printCons',
                    type: 'html',
                    targetStyles: ['*'],
                    ignoreElements:['no-print','bc','gb']
                })
            }
        }