[英]Background Content Prints when Printing Modal Contents in IE
我正在尝试打印Bootstrap模式的内容。 这在Chrome中效果很好,但在IE中,当模式打印时,整个页面内容重叠。 我尝试了在这里找到的一些解决方案,但是我无法为他们工作。
这是我的模式的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。 任何帮助,不胜感激!
我能够通过添加以下内容来使其工作:
<style type="text/css" media="print">
.lb1 {
display: none;
}
</style>
然后,使用lb1类将我不想显示的所有内容放入div中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.