Question

我正在尝试打印Bootstrap模式的内容。这在Chrome中运行良好，但在IE中，当模态打印整个页面内容重叠时。我已经尝试了一些Here找到的解决方案，但我不能让它们为我工作。

这是我的模态的HTML：

 <div ng-cloak>
    <div id="stack4" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
        <div class="modal-dialog modal-responsive">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><span ng-bind="title"></span></h4>
                </div>
                <div class="modal-body">
                    @Html.Partial("_PrintSSQ")
                </div>
                <div class="modal-footer">
                    <span class="pull-left"><button type="button" class="btn btn-primary" data-dismiss="modal">Close</button></span><span class="pull-right"><button type="button" class="btn btn-primary" ng-click="savePdf()">Prepare Print View</button></span>
                </div>
            </div>

        </div>
    </div>
</div>

根据用户通过复选框的选择，它使用以下内容插入要打印的部分视图：

    <div id="saveToPdf">
        <div ng-repeat="ps in print.sections" >
            <div ng-if="ps.QuestionSectionID == 1">
                <div><h4>{{ps.vchSectionName}}</h4></div>
                @Html.Partial("_PrintCompanyProfile")

                <br />
            </div>
            <div ng-if="ps.QuestionSectionID == 2">
                <div><h4>{{ps.vchSectionName}}</h4></div>
                @Html.Partial("_PrintCompanyServices")

                <br />
            </div>
            <div ng-if="ps.QuestionSectionID == 3">
                <div><h4>{{ps.vchSectionName}}</h4></div>
                @Html.Partial("_PrintInformationRelease")

                <br />
            </div>

        </div>

    </div>

这是我的CSS：

   @media print {
  body {
    visibility:hidden;
  }
  #printSection, #printSection {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

这是我的Angular Controller js：

$scope.savePdf = function () {
    printElement(document.getElementById('saveToPdf'));
    window.print();

};
function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof (delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof (delimiter) === "object") {
            $printSection.appendChlid(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}

模态显示如下：

但它的打印方式如下：

这很重要，因为我们的大多数用户都使用IE浏览器。非常感谢任何帮助!!!!

Answer 1

我能够通过添加：

来实现这一目标

    <style type="text/css" media="print">
    .lb1 {
        display: none;
    }
</style>

然后使用lb1类放入我不想在div中显示的所有内容。

在IE中打印模态内容时的背景内容打印

1 个答案: