浏览器局部打印实现，iframe打印

Posted 2020-11-20 ypwei

const handleOk = () =>{
  let ele = document.getElementById(‘printInfor‘);
  let iframe=window.frames[‘myPrint‘];
  iframe.document.open();
  console.log(iframe);
  console.log(document.getElementById(‘myPrint‘));
  document.getElementById(‘myPrint‘).contentWindow.document.body!=null?document.getElementById(‘myPrint‘).contentWindow.document.body.innerhtml="":""
  let mystyle=`
   <style>
         div,p{
              margin: 0;
              padding: 0;      
              word-break:break-all   
         }
          .ant-table-fixed{
          border: 1px solid #333;
        }
        body{
        width:100%;
        height: 100%;
        }
        table{
        border-collapse: collapse;/*关键代码*/
        table-layout: fixed;
        }
       
        td ,th{
          border: 1px solid #333;
          border-collapse: collapse;/*关键代码*/
          text-align: center;
          font-size: 14px;
        }
        </style>
  `
  iframe.document.write(mystyle);
  iframe.document.write(ele.innerHTML);
  iframe.document.close();
  setTimeout(
    function(){
      document.getElementById(‘myPrint‘).contentWindow.print()
    },100)
  dispatch({ type: ‘OmsEntryOrder/updateState‘, payload: {isSaveOk: false}});
}