打印(vue-print-nb、print-js、vuePlugs_printjs)

一 、通过npm 安装插件

1.安装 npm install vue-print-nb --save

2. 在main.js文件中引入

import Print from 'vue-print-nb'
Vue.use(Print);  //注册

//包裹要打印的部分
打印

3.去掉页脚页眉

注：如果内容打印不全，在打印操作时点击更多设置，然后设置缩放

二 、 print-js

npm install print-js --save
import printJS from 'print-js'
printJS({
    printable: 'printPage', // 'printFrom', // 标签元素id
    type: 'html',
    targetStyles: ['*'],
   style: '@page {margin:0 10mm};' // 可选-打印时去掉眉页眉尾
})

解决el-table内容过多列显示不完全

npm install --save html2canvas
import html2canvas from 'html2canvas'

handlePrintPage() { // 打印
      const printContent = document.getElementById('printPage')
      const width = printContent.clientWidth
      const height = printContent.clientHeight
      const canvas = document.createElement('canvas')
      const scale = 1.3 // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
      canvas.width = width * scale
      canvas.height = height * scale
      canvas.style.width = width * scale + 'px'
      canvas.style.height = height * scale + 'px'
      canvas.getContext('2d').scale(scale, scale)
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
      html2canvas(printContent, {
        canvas,
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight,
        scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
        scrollY: -scrollTop
      }).then((canvas) => {
        const url = canvas.toDataURL('image/png')
        printJS({
          printable: url,
          type: 'image',
          targetStyles: ['*'],
          // style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}'// 去除页眉页脚
          style: '@media print{@page {size:landscape;margin: 0cm 1cm 0cm 1cm;}};' // 横行打印
        })
      }).catch(err => {
        console.error(err)
      })
}