【JS】学习记录【页面打印】

【JS】记录一下今天遇到的问题和解决方法

需求：所有的已发布的工单和标准要能打印，打印时隐藏页面所有按钮，效果如下。

问题一：隐藏按钮。
解决办法：
获取按钮，设置样式display=none；

    function onPrint() {
        cui("#grid").setWidth(696);
        var toHide = document.getElementsByClassName("printHidden");
        for (var i = 0; i < toHide.length; i++) {
            toHide[i].style.display = "none";
        }
        window.document.body.innerHTML = document.documentElement.innerHTML;
        window.print();
    };

问题二：打印完成后页面的按钮消失。
解决办法：
打印完成或者关闭打印预览页后刷新页面。

window.onafterprint = function () {
	window.location.reload();
}

问题三：打印预览的表格显示不全。
解决办法：
表格每列设置宽度百分比，不用固定列宽，打印时设置表格整体宽度。

cui("#grid").setWidth(696); //这里用的康拓普前端框架CUI

问题三：太宽的表格默认设置横向打印。
解决办法：
加一个style。

<style type="text/css" media="print">
    @page { size: landscape; }
</style>

【补充】2019年11月25日19:36:23
问题三：IE浏览器宽度需要重新调整
解决办法：识别浏览器类型，window.onbeforeprint 打印之前设置表格宽度

    window.onafterprint = function () {
        window.location.reload();
    }

    window.onbeforeprint = function () {
        var flag = isIE();
        if (!flag) {
            flag = isIE11();
        }
        if (flag) {
            cui("#xxx_grid").setWidth(626);
        } else {
            cui("#xxx_grid").setWidth(696);
        }
    }

    function isIE() {
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
            return true;
        } else {
            return false;
        }
    }

    // ie11
    function isIE11() {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
            return true;
        } else {
            return false;
        }
    }