文章目录

目标

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

方法

<mark>方法一</mark>

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

<mark>方法二</mark>

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

插件安装/模块引入

<mark>方法一</mark>

  • 在项目中安装插件vue-print-nb 
npm install vue-print-nb --save
  • 在main.js中引入 
import Print from 'vue-print-nb' //打印
Vue.use(Print)

<mark>方法二</mark>

  • 在项目中安装插件html2canvas 和 printJS 
npm install html2canvas --save
npm install print-js --save
  • 在页面中引入 
import html2canvas from 'html2canvas'
import printJS from 'print-js'

打印事件处理

<mark>方法一</mark>

  • 指令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中写了去掉页眉页脚所以不显示
},

<mark>方法二</mark>

<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: ''
            })
      })
},