Question

我正在尝试打印模态内容，我的代码与chrome一起正常运行，但它不能与safari一起使用。我使用jQuery $('body').css('visibility', 'hidden');隐藏了正文内容。我也尝试使用opacity:0和opacity:1代替visibility，但它没有用。下面是我用来打印模态内容的代码

function printBtnOpen() {
    var modalId = $(event.target).closest('.modal').attr('id');
    $("#" + modalId).css('visibility', 'visible');
    $('.panel-collapse').collapse('show');
    $('.modal-body').css('max-height', 'none'); 
    setTimeout(function() {
        $('body').css('visibility', 'hidden');
        window.print();
        $('body').css('visibility', 'visible'); 
        $('.modal-body').css('max-height', '688px'); 
   },1000);
}

Answer 1

您可以尝试使用@media print CSS指令来完成此操作，而不是JavaScript：

@media print {
    body {
        visibility: hidden;
    }
    .modal-body {
        max-height: none;
    }
}

您可以将其添加到现有的外部样式表中，或将其分成新的样式表，例如一个名为print.css的样式表。如果您将内容分离为单独的样式表，则可以添加如下所示的链接标记：

<link type="text/css" rel="stylesheet" href="print.css" media="print" />

media="print"指令可帮助浏览器知道链接资源适用于哪种媒体。

<强>参考：

为什么我的$（＆＃39; body＆＃39;）。css（＆＃39; visibility＆＃39;，＆＃39; hidden＆＃39;）;没有使用Safari？

1 个答案: