打印-＞分页打印

该打印方式为DIV 打印局部打印

style={{ pageBreakAfter: ‘always’ }} 此处为分页设置。可以以此为分线进行第二页打印。但是也要注意A4的高度为11**PX 不能超过，内容超过也会开辟第二页打印内容。

<div id="tableinfo" style={{ position: 'relative', display: 'none' }}>

 <div>第一页</div>
 <div style={{ pageBreakAfter: 'always' }} ></div>
<div>第二页</div>

</div>

// 将打印内容html方式给变量
 var windows = this.print(document.getElementById('tableinfo').innerHTML);
  windows.close();  //关闭打印页 否则原页面无法进行点击

print = (content, w = null, h = null) => {

    // Fixes dual-screen position                         Most browsers      Firefox
    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;

    const width = window.innerWidth
      ? window.innerWidth
      : document.documentElement.clientWidth
        ? document.documentElement.clientWidth
        : screen.width;
    const height = window.innerHeight
      ? window.innerHeight
      : document.documentElement.clientHeight
        ? document.documentElement.clientHeight
        : screen.height;
    w = +w === 0 ? width : w;
    h = +h === 0 ? height : h;
    const left = width / 2 - w / 2 + dualScreenLeft;
    const top = height / 2 - h / 2 + dualScreenTop;
    var myWindow = window.open(
      '',
      '打印',
      'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' +
      w +
      ', height=' +
      h +
      ', top=' +
      top +
      ', left=' +
      left
    );
    //文本内容CSS 如果使用外联必须在此处再次添加;
    var style = `<style    type='text/css'>
     .boderclass{
      border: 2px solid black;
      padding: 30px;
      height:950px;
     }
    body .ant-table-thead > tr > th{
            padding: 0 8px 0 8px;
                border: 1px solid #e8e8e8;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 16px;
                line-height: 46px;
                height: 46px;
                color: #303030;
            }
            body .ant-table-tbody > tr > td {
                padding: 0 8px 0 8px;
                overflow: hidden;
                text-overflow: ellipsis;
                border: 1px solid #e8e8e8;
                font-size: 14px;
                height: 38px;
                color: #606060;
            }
            .ant-table table {
                width: 100%;
                text-align: left;
                border-radius: 4px 4px 0 0;
                border-collapse: separate;
                border-spacing: 0;
            }
         
                </style>`;


    myWindow.document.write(content + style);
 
    myWindow.focus();
    myWindow.document.close(); //关闭document的输出流, 显示选定的数据
    myWindow.print(); //打印当前窗口
    return myWindow;
  };