Question

我有问题。我正在尝试打印出div中的内容，基本上是按钮下面的所有内容（见下图）。 Div content

但是我尝试打印，结果看起来像这样： preing preview

即。没有任何样式表。

但代码包含了我目前拥有的所有css文件。

这是我的功能。我尝试使用或不使用样式表和不同的方法来引用它们。谁能看到我做错了什么？

function PrintHistory() {
        var printDivCSS5 = new String(
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.core.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.resizable.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.selectable.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.accordion.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.autocomplete.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.button.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.dialog.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.slider.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.tabs.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.datepicker.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.progressbar.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.theme.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jqGrid.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jqgrid-smoothness-ui.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/datepicker.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/ui.fancytree.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/site.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/bootstrap.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/Hepper.mms.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/bootstrap-select.css">' +
            '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/typeahead.css">');

        var oldPage = document.body.innerHTML;
        var prtContent = document.getElementById("historyTabeTarget");
        var WinPrint = window.open('', '', 'letf=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status=0');
        WinPrint.document.write("<html><head><title></title></head><body>" + printDivCSS5 + prtContent.innerHTML + "</body>");
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
        prtContent.innerHTML = oldPage;
    };

Answer 1

我相信它可以通过CSS实现。您需要做的就是在样式表中添加以下CSS规范进行打印。

@media print{
    /* your print css */
}

将display: none;用于您不希望打印的所有元素，并相应地覆盖剩余的CSS。

打印页面javascript的一部分

1 个答案: