Mozilla Firefox 打印模态数据以及要打印的 div答案

【问题标题】：Mozilla Firefox printing Modal data along with the div that is to be printedMozilla Firefox 打印模态数据以及要打印的 div
【发布时间】：2021-10-14 15:39:34
【问题描述】：

```
<div class="maindiv></div>
<div class="printablediv"></div>


function printData()
{
    $('#ProductIdModal').modal('hide');
    $(".maindiv").css('display','none');
    $(".Printablediv").css('display','block');
    $('.modal-backdrop').remove();
    window.print();
}


window.addEventListener("afterprint", myFunction);
function myFunction() {
    $(".maindiv").css('display','block');
  $(".Printablediv").css('display','none');
}

```

我编写了一个函数，用于在 Ajax 成功时打印一个名为 printData() 的 div。 Ajax 调用是通过名为 ProductModal 的模式上的按钮进行的

我在 chrome 中获得的打印预览很好，但模态显示在 div 下方的 mozilla firefox 中。

在 chrome 中打印预览：

Mozilla 中的打印预览：

【问题讨论】：

标签： javascript html google-chrome printing mozilla

【解决方案1】：

尝试使用 print 媒体查询。对于您的情况，我不确定您是否需要将样式应用于页面或模式。

这些 CSS 样式仅在打印时自动应用，即使通过浏览器也是如此。您可以更改样式或隐藏内容。

/* print styles. put these at the end of your css. */
@media print {
    /* some of yours, copied from the js function: */
    .modal                      { display: none; }
    .maindiv                    { display: none; }
    .Printablediv               { display: block; }

    /* other. */
    *                           { color:#333; }
    html                        { height:auto; }
    .otherThing                 { font-size: 20pt; }
}

希望有效。

【讨论】：