纯js实现打印功能

data数据

const res = {
    "msg":"success",
    "totalAmount":364400.64,
    "code":0,
    "documentNumberlist":[
        "123"
    ],
    "documentName":"手工单据",
    "reimbursementPerson":"shy",
    "reasonForReimbursement":""
}

js代码

let data = res.data;
if(data.code == '0'){
let iframe = document.createElement('IFRAME');
let doc = null;
iframe.setAttribute("id", "print-iframe");
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write("<title>&nbsp;</title>");
// 为了去除表头部分
doc.write('<style media="print">@page {size: auto;margin: 0;}</style>');
doc.write('<h1 style="text-align: center;margin-top: 100px;">'+data.documentName+'</h1>');
doc.write('<p style="text-align: center;">销项业务单据</p>');
let OA = data.documentNumberlist ? data.documentNumberlist.map(n=> `<p>${n}</p>`).join('') : '';
doc.write('<table border="1" cellspacing="0" cellpadding="10" style="min-width: 500px;margin: 0 auto;">' +
  '            <tr>' +
  '              <td style="width: 100px;padding: 7px;">手工业务单号</td>' +
  '              <td style="padding: 7px;">'+row.manualDocumentNum+'</td>' +
  '            </tr>' +
  '            <tr>' +
  '              <td style="padding: 7px;">OA业务单号</td>' +
  '              <td style="padding: 7px;">'+OA+'</td>' +
  '            </tr>' +
  '            <tr>' +
  '              <td style="padding: 7px;">报帐人</td>' +
  '              <td style="padding: 7px;">'+data.reimbursementPerson+'</td>' +
  '            </tr>' +
  '            <tr>' +
  '              <td style="padding: 7px;">合计金额</td>' +
  '              <td style="padding: 7px;">'+data.totalAmount+'</td>' +
  '            </tr>' +
  '            <tr>' +
  '              <td style="padding: 7px;">报销事由</td>' +
  '              <td style="padding: 7px;">'+(data.reasonForReimbursement || '')+'</td>' +
  '            </tr>' +
  '          </table>')
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0){
  document.body.removeChild(iframe);
}

展示效果

js打印展示效果