js打印功能的实现（通用）

业务需求：基于bootstrap和layout的一套可视化布局系统（用来自定义简历），在操作布局界面向预览界面转换时截一张预览界面的图片保存到后台。

第一次尝试：百度后发现很简单，只需要调用 window.print()就可以实现打印功能啦。但是遇到了问题，就是样式错乱，打印不能撑满一张A4纸。经过多番测试后发现是可视化布局系统的逻辑影响了打印效果。

最终方案：在操作界面转换为预览界面时对屏幕进行截图，然后用打印截图取代之前的直接打印节点代码。截图使用到html2canvas插件

html2canvas($("#print"), {

            height: $("#print").outerHeight() + 750,

            width: $("#print").outerWidth() + 750,

            onrendered: function (canvas) {

                //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了

                const img = new Image();

                img.src = canvas.toDataURL();

                var imgComplete = 0;

                img.onload = () => {

                    //新开窗口打印，否则无法解决回显问题

                    if (imgComplete == 1) {

                        return;

                    }

                    var newwindow = window.open("", "_blank");

                    newwindow.document.body.appendChild(img);

                    newwindow.window.print();

                    //解决img onload无限调用问题

                    imgComplete = 1;

                };

            },

            useCORS:true,

        });

说明：useCORS是用来开启跨域的，想要截屏的代码段里存在从后台获取的图片等资源时要开启才行，否则图片资源无法显示

————————————————

版权声明：本文为CSDN博主「Micc_web」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/micc_web/article/details/87601310