前后尝试了 两个插件 vue-print-nb、vue-easy-print ，都不行。最后选择了 print-js。

不多说了，贴整个代码

<template>

<div class="table-data">

<div class="search-box">

<el-row>

<el-col :span="24">

<div class="grid-content bg-purple">

<el-row>

<el-col :span="20">

<div class="block">

<el-date-picker size="mini" type="daterange" v-model="selectDate" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="searchPay">

</el-date-picker>

</div>



</el-col>

<el-col :span="2">



<el-button type="primary" icon="el-icon-printer" size="mini" @click="printDemo">打印</el-button>

</el-col>



</el-row>

</div>

</el-col>

</el-row>



</div>

<div >

<el-table v-loading="loading" element-loading-text="拼命加载中" :data="tableData" border stripe style="width:100%" class="table-box-print">

<el-table-column width="200" label="缴费日期" prop="payDate" align="center" sortable></el-table-column>

<el-table-column fit label="缴费方式" prop="payWay" align="center" sortable></el-table-column>



<el-table-column fit label="缴费笔数" prop="count" align="center"></el-table-column>

<el-table-column fit label="实缴金额" prop="courseTotal" align="center"></el-table-column>



</el-table>

<el-divider></el-divider>

<el-row>

<el-col :span="2" :offset="10">



<el-tag size="mini">缴费数：</el-tag>



</el-col>

<el-col :span="5">

<el-input size="mini" v-model="count" :disabled="true">

</el-input>



</el-col>



<el-col :span="2">



<el-tag size="mini">缴费总额：</el-tag>



</el-col>

<el-col :span="5">

<el-input size="mini" v-model="totalFee" :disabled="true">

</el-input>



</el-col>



</el-row>



</div>

</div>

</template>



<script lang="ts">

import {

Component,

Vue,

Provide

} from "vue-property-decorator";

import {

State,

Getter,

Mutation,

Action

} from "vuex-class";



import print from 'print-js';



@Component({

components: {

print

}

})



export default class PayRecordPrintByPayWay extends Vue {

@Getter("user") getUser: any;

@Provide() selectDate: any = "";



@Provide() tHeight: number = document.body.offsetHeight - 100;

@Provide() tableData: any = []; // 表格数据

@Provide() printData: any = []; // 表格数据



@Provide() page: number = 1; // 当前page

@Provide() size: number = 50; // 请求数据的个数 默认5

@Provide() total: number = 0; // 总数据条数



@Provide() count: number = 0; // 总数据条数



@Provide() totalFee: number = 0; // 总数据条数



@Provide() loading: boolean = true;



test() {

console.log(this.selectDate);

console.log(this.selectDate[0]);

console.log(this.selectDate[1]);

this.searchPay();

}



created() {



this.loading = false;

}

handleSizeChange(val: number): void {

this.size = val;

this.page = 1;

//this.searchVal ? this.loadSearchData() : this.loadData();

}

handleCurrentChange(val: number): void {

this.page = val;

//this.searchVal ? this.loadSearchData() : this.loadData();

}



/**

查询缴费记录



*/

searchPay() {



if (this.selectDate.length < 2) {

return;

}



let data: any = {

beginDate: this.selectDate[0],

endDate: this.selectDate[1],



};



(this as any).$axios.post("/student/searchPayRecordWithPayWay", data).then((res: any) => {

if (res.data.state == "error") {

this.$message({

message: res.data.msg,

type: res.data.state,

duration: 3000

});

}

this.tableData = res.data.list;



this.printData = res.data.list;

this.total = res.data.total;



if (this.total > 0) {

for (let i = 0; i < this.total; i++) {

this.totalFee = this.totalFee + Number(this.tableData[i].courseTotal);

this.count = this.count+ Number(this.tableData[i].count);

}



}



this.printData.push({

payWay: '合计',

count: this.count ,

courseTotal:this.totalFee,

payDate:"------"



})






this.loading = false;

});

}




printDemo() {



print({

printable: this.printData,

//table header

//field someJSONdata对应的字段 displayName 打印表格显示的字段

properties: [



{

field: 'payDate',

displayName: '缴费日期',

columnSize: 1

},

{

field: 'payWay',

displayName: '缴费方式',

columnSize: 1

},



{

field: 'count',

displayName: '缴费笔数',

columnSize: 1

}

, {

field: 'courseTotal',

displayName: '实缴金额',

columnSize: 1

}



],

// 头部样式

// gridHeaderStyle: "border: 1px solid lightgray;white-space:nowrap; ",

// //表格样式

// gridStyle: "border: 1px solid lightgray;white-space:nowrap; ",

gridHeaderStyle: 'color: red; border: 1px solid #3971A5;',

gridStyle: 'border: 1px solid #3971A5; text-align:center; font-size: 8px;',



header: '<h3 class="custom-h3">缴费方式统计表</h3>',

// scanStyles: false,

// style: style,



//打印类型

type: "json"

});



}

}

</script>



<style lang="scss">

.table-box-print {

font-size: 8px;



th {

padding: 0 !important;

height: 20px;



}



td {

padding: 0 !important;

height: 20px;



}



}



.pages {

background: #fff;

margin-top: 10px;

padding: 10px 10px;

text-align: right;

height: 50px;

box-sizing: border-box;

}



.table-data {

.el-input {

width: 200px;

margin-right: 10px;

}



.search-box {

background: #fff;

margin-bottom: 10px;

padding: 10px 10px;

border-radius: 4px;

height: 50px;

box-sizing: border-box;



.el-input {

width: 100px;

margin-right: 10px;

}



}

}

</style>