纯js+由数据直接实现PDF打印功能
  XgwuVA9MsUxO 2023年11月02日 40 0


data数据:

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

将数据处理为PDF:

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> </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('') : '';
	// 根据实际情况来编写想要在打印pdf中展示的内容
	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+由数据直接实现PDF打印功能_PDF打印

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  weJJYN9HsnRF   2023年12月02日   29   0   0 jsisNaNjsisNaN