关于javascript:前端打印功能方式

8次阅读

共计 846 个字符，预计需要花费 3 分钟才能阅读完成。

打印的多种实现形式：
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_…

正文完