vue 打印数据库全部内容

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;
    }
  },

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值