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

Question

```
<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');
}

```

我编写了一个名为 printData() 的函数，用于在 Ajax 成功时打印 div。 Ajax 调用是从名为 ProductModal

的模态上的按钮进行的

我在 chrome 中获得的打印预览很好，但模态显示在 div.

下方的 mozilla firefox 中

在 chrome 中打印预览：

在 mozilla 中打印预览：

Answer 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; }
}

希望有用。

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

Mozilla Firefox printing Modal data along with the div that is to be printed

html

javascript

printing

mozilla

google-chrome