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

Posted 2023-05-07

【中文标题】Mozilla Firefox 打印模态数据以及要打印的 div

【英文标题】：Mozilla Firefox printing Modal data along with the div that is to be printed

【发布时间】：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 中的打印预览：

【参考方案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; 

希望有效。