前端实现页面打印---局部打印

背景

最近写了个打印设计器插件，在模板配置完需要增加一个预览功能，所以就想到浏览器的print方法，因为只有设计页面需要打印，并不是整个html，因此需要打印局部的页面。

局部打印

方法1：

let bodyHtml =  window.document.body.innerHTML
window.document.body.innerHTML = document.querySelector('.print-design').innerHTML
window.print()
window.document.body.innerHTML = bodyHtml

方法2：

let iframe = document.getElementById("print-iframe");
if (iframe) {
    //防止每次打开都是上一次打开的内容
    document.body.removeChild(iframe);
}
if (!document.getElementById("print-iframe")) {
    let el = null;
    el = document.querySelector(".deginer-com");
    iframe = document.createElement("IFRAME");
    let doc = null;
    iframe.setAttribute("id", "print-iframe");
    iframe.setAttribute("style", "display:none;");
    document.body.appendChild(iframe);
    doc = iframe.contentWindow.document;
    doc.write("
" + el.innerHTML + "
");
    doc.close();
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
 }
 if (navigator.userAgent.indexOf("MSIE") > 0) {
     document.body.removeChild(iframe);
 }
      

参考文章：js实现打印快递单_cypersonal的博客-CSDN博客