原生表格打印 print 带样式

      let win=window.open('','打印','height=900,width=1600');

      //获取头 start
      let ths= document.querySelector('.tableHead').querySelectorAll('th')
      let tableHead='<tr>'
      ths.forEach((item,index)=>{
        if(index>0&&index<ths.length-2){
          tableHead+=`<th>${item.textContent}</th>`
        }
      })

      tableHead+='</tr>'
      //获取头 end

      let table=``


      let tbody= document.querySelector('tbody')

      tbody.querySelectorAll('tr').forEach((tr,trIndex)=>{
        let tds=tr.querySelectorAll('td')
        let tableTr=''

        if(trIndex%10==0){
          if(trIndex>=10){
            table+='</table>'
          }
          tableTr+=tableHead

          table+='<table>'

        }

        tds.forEach((item,index)=>{
          if(index>0&&index<tds.length-1){
            tableTr+=`<td>${item.textContent}</td>`
          }
        })
        table+=`<tr>${tableTr}</tr>`
      })
      // console.log(table)
      // table=`<!--<table>${table}</table>-->`
      //添加样式
      let style=`
          <style>
                  * {
              -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
              color-adjust: exact !important;  /*Firefox*/
          }
      table{
        width: 100%;
        border-left: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
        page-break-after:always;
      }



      tr:nth-child(2n+1){
        background: #F6F7FA;
      }

      .fenye{
        page-break-after:always!important;
      }

      th,td{
        font-size: 13px;
        font-weight: inherit;
        border-right:1px solid #DDDDDD;
        border-top:1px solid #DDDDDD;
        text-align: center;
        padding:10px 10px;
        color: #606974;
      }
      th{
        background: #E12831;
        color: #fff;
      }
    </style>
      `


      win.document.write(style);
      win.document.write(table);
      win.print()
      win.close()
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值