原生js实现打印功能1. 原生js实现打印功能如上代码；我们需要先获取到获取到打印的模块printhtml，以及打印结

最近，项目需求；需要在页面调用打印机打印页面；以前没接触过。记录分享；

1. 原生js实现打印功能

很容能百度到 window.print()方法；不过此window方法为打印整个页面；如果需要打印页面部分模块，则需要获取到需要Dom来替换掉当前window的html，会造成一些非预期的结果；


<script>
    var printhtml= window.document.querySelector('.print').innerHTML;

    window.document.body.innerHTML=printhtml; //把需要打印的指定内容赋给body.innerHTML
    window.print(); //调用浏览器的打印功能打印指定区域
    window.location.reload();
</script>

如上代码；我们需要先获取到获取到打印的模块printhtml，以及打印结束后需要刷新下页面...

2. 用到ifram

由于直接调用会影响到原页面，这儿用到iframe


<script>
    var bdhtml= window.document.querySelector('.app-main')
    var allHtml  = window.document.cloneNode(true);
    var cssLink = '<link rel="stylesheet" href="../../../../app.css">'
    allHtml.body.innerHTML = bdhtml.innerHTML + cssLink
    var printFrame = document.createElement('iframe');
    printFrame.setAttribute('style', 'visibility: hidden; height: 0; width: 0; position: absolute;');
    printFrame.srcdoc = allHtml.documentElement.innerHTML;
    document.getElementsByTagName('body')[0].appendChild(printFrame);
    printFrame.contentWindow.print();
</script>

如上代码；我们用到了iframe以及iframe的srcdoc属性,此方法可以不影响到原生页面来调用打印功能；需要注意的是，在你生成新的iframe内的html时，样式可能样式会有影响，加载不完全(全局样式特别)，需要单独引入一些你自己的样式