前端打印功能方式

打印的多种实现方式：
1、整个页面打印；

    window.print();//
    let a = document.getElementById('dd').innerHtml();
    window.print(a);//局部打印

2、用图片转存为另外一个html的方式实现打印；

    下载： html2canvas.min.js引入；
    ![image.png](/img/bVcVPvh)
    如需设置新页面的页眉页脚，
    let a = '<style type="text/css" media="print">'+
            '@page{  size:auto; margin: 0mm;} </style>'
    newWindow.document.write(a);
    这样就可以对新开的页面进行设置页眉页脚，完美解决！

关于如何动态添加styleSheets:

 let style = document.createElement('style');
 style.type = 'text/css';
 style.media = 'print';
 style.innerHtml = 'color:red';
 document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

挺有意思的，卡在了media怎么加上去来着，想了一会儿突然发现方法也是一样的，哈哈哈哈哈，直接write()的方式虽然粗暴，但却直接有效。

参考文档：
【html 动态添加style,Javascript动态创建 style 节点_渴饮易水流的博客-CSDN博客】https://blog.csdn.net/weixin_...
【JS 添加css样式_chengzhibe359483的博客-CSDN博客】https://blog.csdn.net/chengzh...
【html2canvas生成图片模糊 不清楚？两种解决方法_希文Gershwin-CSDN博客_html2canvas图片模糊】https://blog.csdn.net/weixin_...