JS打印指定的id区域内容而不是完整的页面的解决办法

JS打印指定的id区域内容的解决办法：

/**
 * 打印指定的id区域内容
 * @param id
 */
function printId(id) {
    printHandleElements(); // 打印前需处理表单元素的值
    var bdHtml = window.document.body.innerHTML;
    var idEle = document.getElementById(id);
    var partHtml = idEle.outerHTML || idEle.innerHTML;
    // 把获取的 局部div内容赋值给body标签，相当于重置了body里的内容
    window.document.body.innerHTML = partHtml;
    window.print(); // 打印网页内容
    setTimeout(() => {
        window.document.body.innerHTML = bdHtml; // 重新给内容页面赋值
        //window.location.reload(); // 重新刷新当前窗口，很重要，不刷新会导致局部之外的全失效
    });
}

/**
 * 打印前需处理表单元素的值
 */
function printHandleElements() {
    var inputs = document.getElementsByTagName("input");
    var textareas = document.getElementsByTagName("textarea");
    var selects = document.getElementsByTagName("select");
    // input
    for (var i = 0; i < inputs.length; i++) {
        var _input = inputs[i];
        var _type = _input.type.toLowerCase();
        if (_type == "checkbox" || _type == "radio") {
            if (_input.checked == true) {
                _input.setAttribute("checked", "checked");
            } else {
                _input.removeAttribute("checked");
            }
        } else if (_type == "text") {
            _input.setAttribute("value", _input.value);
        } else {
            _input.setAttribute("value", _input.value);
        }
    }
    // textarea
    for (var i = 0; i < textareas.length; i++) {
        var _textarea = textareas[i];
        var _type = _textarea.type.toLowerCase();
        if (_type == "textarea") {
            _textarea.innerHTML = _input.value;
        }
    }
    // select
    for (var i = 0; i < selects.length; i++) {
        var _select = selects[i];
        var _type = _select.type.toLowerCase();
        if (_type == "select-one") {
            var options = _select.options || _select.children;
            for (var j = 0; j < options.length; j++) {
                var _option = options[j];
                if (_option.tagName.toUpperCase() == "OPTION") {
                    if (_option.selected == true) {
                        _option.setAttribute("selected", "selected");
                    } else {
                        _option.removeAttribute("selected");
                    }
                }
            }
        }
    }
}

页面部分代码节选:

/* 打印专用样式 */
@media print {
    .tabGrid {
        width: 1200px;
    }
    .tabGrid table {
        width: 100%;
        font-size: 12px;
    }
    ...
    
}

<div id="tabGrid" class="tabGrid">
...

</div>

第二种实现方式：

来自网友，原文链接："https://cloud.tencent.com/developer/information/如何打印选定的div而不是完整的页面-album"

1.首先，给需要打印的div添加一个唯一的id属性，例如id="printable-div"。
2.在JavaScript中，使用window.print()方法来触发打印功能。但是默认情况下，它会打印整个页面。
3.为了只打印选定的div区域，可以使用CSS的@media print 媒体查询来隐藏其他不需要打印的元素。

在CSS样式表中添加以下代码：

@media print {
    body * {
        visibility: hidden;
    }
    #printable-div, #printable-div * {
        visibility: visible;
    }
    #printable-div {
        position: absolute;
        left: 0;
        top: 0;
    }
}

上述代码将隐藏所有页面元素，然后将选定的div及其子元素设置为可见，并将其位置设置为左上角。

在JavaScript中，创建一个函数来触发打印功能，并将其绑定到一个按钮或其他事件上。例如：

/**
 * 打印选定的区域
 */
function printDiv() {
    window.print();
}

在HTML中，添加一个按钮或其他事件触发器，并调用printDiv()函数：

<button onclick="printDiv()">打印选定的div</button>

这样，当点击按钮时，将只打印选定的div而不是整个页面。

用心生活，认真工作。