来自modal的javascript - windows.print()在内容后显示空白

Question

这个问题我已经有很长一段时间了。我正在打印一个在模式中的表格，打印预览中显示的内容是可以的，但在表格之后是一大块空白。And look like this.它在一个页面中显示了两个页面，只是为了解释我的问题，灰色背景可以通过取消选中背景图形来禁用。

这是我用来打印的代码，它在我的索引中，"_fields“是我想要打印的div的Id。

@section Scripts {
<script src="~/js/areas/human-resources/payrollmovement/index.js"></script>
<script>
    $(document).ready(function () {
        document.getElementById("btn-print").onclick = function () {
            printElement("_fields");
        }

        function printElement(div) {
            // Create and insert new print section
            var elem = document.getElementById(div);
            var domClone = elem.cloneNode(true);
            var $printSection = document.createElement("div");
            $printSection.id = "printSection";
            $printSection.appendChild(domClone);
            document.body.insertBefore($printSection, document.body.firstChild);
            window.print();

            // Clean up print section for future use
            var oldElem = document.getElementById("printSection");
            if (oldElem != null) { oldElem.parentNode.removeChild(oldElem); }


            return true;
        }
    });
</script>}

这是我的css

@media screen {
    #printSection {
    display: none;
    }
}

@media print {
body * {
    visibility: hidden;
}

#printSection, #printSection * {
    visibility: visible !important;
}

#printSection {
    position: absolute;
    left: 0;
    top: 0;
}

.modal-open .wrapper {
    display: none !important;
    visibility: hidden !important;
}
}

我想去掉表格后面的空格，以及一种复制表格的方法。

Answer 1

我用过两个插件来打印页面的一部分，所以你应该试试。不能保证他们会解决你的问题，但他们值得一试。

https://jasonday.github.io/printThis/

https://printjs.crabbly.com/