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

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理