时间戳

首页 > 解决方案 > Mozilla Firefox 打印模态数据以及要打印的 div

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

问题描述

```
<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 中的打印预览： 在此处输入图像描述

标签： javascripthtmlgoogle-chromeprintingmozilla

解决方案

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

这些 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; }
}

希望有效。

推荐阅读