安装依赖：
npm install vue-print-nb --save

main.js引入
import Print from 'vue-print-nb'
Vue.use(Print)

<template>
    <div :class="['collectionLeader']">
        <section class="box">
            <div class="tableBox" :style="{width:width}" id="printArea">
                <el-row class="describe-floor">
                		//打印按钮
                        <i class="el-icon-printer noprint print-btn" v-if="isPrintShow" @click="printerClickHandle"></i>
                        <span id="printBtn"  v-print="print" type="primary" style="display: none">点击打印</span>
                </el-row>
                <el-table :data="tableData" ref="table" border  :max-height="maxHeight" :key="isPrint">
                    <el-table-column
					        prop="date"
					        label="日期"
					        width="180">
					      </el-table-column>
					      <el-table-column
					        prop="name"
					        label="姓名"
					        width="180">
					      </el-table-column>
					      <el-table-column
					        prop="address"
					        label="地址">
					      </el-table-column>
    
                    </el-table-column>
                </el-table>

            </div>
        </section>
    </div>
</template>
<script>
export default {
    name: 'collection',
    data() {
        return {
        	maxHeight:500,
            isPrint:0,
            isPrintShow:false,
            print: {
                id: 'printArea',
                popTitle: '打印', // 打印配置页上方标题
                extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
                preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
                previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
                previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
                zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
                previewBeforeOpenCallback(vue) {
                }, //预览窗口打开之前的callback（开启预览模式调用）
                previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
                beforeOpenCallback(vue) {
                }, // 开启打印前的回调事件
                openCallback() {}, // 调用打印之后的回调事件
                closeCallback(vue) {
                    vue.isPrint=1
                    vue.maxHeight= window.innerHeight- 128
                }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
                url: '',
                standard: '',
                extraCss: '',
            },
        }
    },
    
    created() {
      
    },
    methods: {
        printerClickHandle(){
            this.maxHeight='auto'//为了让表格全部显示
            this.isPrint=Math.random()//随机生成key，为了让表格查询渲染
            this.$nextTick(()=>{//全部渲染之后，模拟点击v-print="print"
                setTimeout(()=>{
					// 解决表头对不齐问题。对不齐原因：table-layout: auto 表格自适应渲染。表头和内容是俩表格，改成一个表格
					 let parentElement = document.querySelector("#tableData .el-table__body-wrapper  table")
                    let existingElement =  document.querySelector("#tableData .el-table__body-wrapper  table tbody")
                    let newElement = document.querySelector("#tableData .el-table__header-wrapper table thead")
                    parentElement.insertBefore(newElement, existingElement);

                    document.getElementById("printBtn").click();
                },200)
            })
        }
    },
}
</script>

<style media="print" lang="scss">
@page {
    size: landscape;
    margin: 6mm;
}
@media print {//对样式单独处理
    #printArea{
        text-align: center;
        .noprint{
            display: none;
        }
        .head{
            font-size: 22px !important;
            margin-bottom: 12px;
        }
        table {
            table-layout: auto !important;
        }
        .el-table__body-wrapper{
            border-right: 1px solid #cfd8df;
            border-bottom: 1px solid #cfd8df;
        }
        .el-table__header-wrapper .el-table__header {
            width: 100% !important;
            border: solid 1px #f2f2f2;
        }
        .el-table__body-wrapper .el-table__body {
            width: 100% !important;
        }
        // 解决固定列错乱问题
        .el-table__fixed{
            display: none;
        }
        .el-table__cell.is-hidden>*,td.is-hidden>*{
            visibility: visible !important;
        }

    }
}
</style>

</style>