1.安装 print-js
npm install print-js --save
2.页面引入
// 在当前vue文件内引用
import printJS from ‘print-js’
<el-button @click="handlePrint">打印</el-button>
methods:
handlePrint(){
getPrintList(this.searchMap).then(response => {
const res = response.data
let data = [];
for(let i = 0; i<res.length; i++){
data.push({
field1:i+1,
field2:res[i].salaryName,
field3:res[i].salaryNumber,
field4:res[i].salarySex,
field5:res[i].salaryAge,
field6:res[i].salaryPay,
field7:res[i].salaryStatus,
field8:res[i].salaryAddress
})
data[i].field4==0?data[i].field4="男":data[i].field4="女"
data[i].field7==0?data[i].field7="在职":data[i].field7="离职"
}
printJS({
printable:data,
properties:[{
field:'field1',
displayName:'序号',
columnSize:1
},{
field:'field2',
displayName:'姓名',
columnSize:1
},{
field:'field3',
displayName:'工号',
columnSize:1
},{
field:'field4',
displayName:'性别',
columnSize:1
},{
field:'field5',
displayName:'年龄',
columnSize:1
},{
field:'field6',
displayName:'工资',
columnSize:1
},{
field:'field7',
displayName:'状态',
columnSize:1
},{
field:'field8',
displayName:'地址',
columnSize:1
}],
type:'json',
header:'[工资管理] '+this.getPrintTime(),
//样式设置
headerStyle:'font-size:15px;',
gridStyle:'border:1px solid #3971A5;',
gridHeaderStyle:'font-weight:bold;font-size:20px; border:1px solid #3971A5;'
})
}).catch(function (error) { // 请求失败处理
console.log(error);
});
},
getPrintTime(){
var date=new Date();
var year=date.getFullYear();//得到当前年份
var month=this.editTime(date.getMonth()+1);//得到当前月份
var day=this.editTime(date.getDate());//得到当前几号
var hour=this.editTime(date.getHours());//得到当前小时
var min=this.editTime(date.getMinutes());//得到当前分钟
var seconds=this.editTime(date.getSeconds());//得到当前秒
var weeks=date.getDay();
var week;
switch(weeks){
case 0:
week="星期日";
break;
case 1:
week="星期一";
break;
case 2:
week="星期二";
break;
case 3:
week="星期三";
break;
case 4:
week="星期四";
break;
case 5:
week="星期五";
break;
case 6:
week="星期六";
break;
}
var show = "打印时间:"+year+"-"+month+"-"+day+" "+hour+":"+min+":"+seconds+" "+week;
return show;
},
editTime(i){
if(i<10){
i="0"+i;
}
return i;
}
},