vue打印部分页面

方法一、

在项目中安装插件vue-print-nb
npm install vue-print-nb --save

在main.js中引入
import Print from 'vue-print-nb' //打印
Vue.use(Print)

使用
//点击打印
<el-button v-print="'#printMe'">打印</el-button>

//要打印的div
<div class="index-home" id="printMe"></div>

方法二、

在项目中安装插件html2canvas 和 printJS
npm install html2canvas --save
npm install print-js --save

在要打印的页面中引入
import html2canvas from 'html2canvas'
import printJS from 'print-js'

//打印按钮v-print
<el-button class="print-btn" v-print="printObj">打 印</el-button>
<div class="index-home" id="printMe"></div>
在data里面设置打印的DIV的id和标题
printObj: {
    id: 'printMe',//打印标签的id
    popTitle: ''// 打印的标题，因为css中写了去掉页眉页脚所以不显示
},

或者------
<el-button class="print-btn" @click="printHandle">打 印</el-button>
<div class="index-home" ref="printMe"></div>

printHandle() {
          html2canvas(this.$refs.pdf, {
            backgroundColor: null,
            useCORS: true,
            windowHeight: document.body.scrollHeight
          }).then((canvas) => {
            const url = canvas.toDataURL()
            this.img = url
            const style = '@page {margin:0 10mm};'
            printJS({
              printable: url,
              type: 'image',
              style,
              documentTitle: ''
            })
          })
        },