VUE项目中打印/转换图片打印

目标

• 将页面一个带滚动条的div生成图片并打印

方法

方法一

• 使用vue-print-nb：可使用指令，简单方便，不过可能会有排版问题

方法二

• 使用html2canvas + printJS，没有排版问题，需要做事件处理（先转换成图片再打印）

插件安装/模块引入

方法一

• 在项目中安装插件vue-print-nb

npm install vue-print-nb --save

• 在main.js中引入

import Print from 'vue-print-nb' //打印
Vue.use(Print)

方法二

• 在项目中安装插件html2canvas 和 printJS

npm install html2canvas --save
npm install print-js --save

• 在页面中引入

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

打印事件处理

方法一

• 指令v-print

<el-button v-if="print_show" type="success" plain class="print-btn" v-print="printObj">打 印</el-button>

• 在data里面设置打印的DIV的id和标题

printObj: {
     id: 'assessContent',//打印标签的id
     popTitle: ''// 打印的标题，因为css中写了去掉页眉页脚所以不显示
},

方法二

<el-button v-if="print_show" type="success" class="print-btn" @click="printHandle">打 印</el-button>

• this.$refs.assessContent拿到被打印的DIV的DOM
• assessContent是该DOM设置的ref

printHandle() {
      html2canvas(this.$refs.assessContent, {
             backgroundColor: null,
             useCORS: true,
             windowHeight: document.body.scrollHeight
      }).then((canvas) => {
             const url = canvas.toDataURL()
             this.img = url
             printJS({
                 printable: url,
                 type: 'image',
                 documentTitle: ''
            })
      })
},