jQuery 生成的 bg 图像无法打印答案

【问题标题】：jQuery-generated bg images fail to printjQuery 生成的 bg 图像无法打印
【发布时间】：2018-12-26 12:22:07
【问题描述】：

好吧，我很困惑，我希望这只是我缺乏经验和/或知识。

我目前正在开发一个简单的应用程序来生成具有选定（或随机）背景的表格。核心代码如下：

let getRandomInt = (max) => {
  return Math.floor(Math.random() * max);
};

$(document).ready( () => {

  $("#print").click( () => {
    $(".noprint").toggle();
    window.print();
    $(".noprint").toggle();
  });

  $("#generate").click( () => {
    let colourPick = $("#colour:checked").attr("value");

    // ignore getRandomInt, its defined outside of this event handler
  
    if (colourPick == "rand"){
      $("table.printedTable").css("background-image", `url("../static/bgs/${getRandomInt(9)}.gif")`);
    } else {
      $("table.printedTable").css("background-image", `url("../static/bgs/${colourPick}.gif")`);
    }
  });
});

.printedTable {
  background-image: url("bgs/0.gif");
  background-repeat: repeat;
}

.noprint {
  background-image: none;
}

div.colourSample{
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-repeat: repeat;
}

.c0 {background-image: url("bgs/0.gif");}
.c1 {background-image: url("bgs/1.gif");}
.c2 {background-image: url("bgs/2.gif");}
.c3 {background-image: url("bgs/3.gif");}
.c4 {background-image: url("bgs/4.gif");}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <table class="noprint">
    <tr>
      <td colspan="5"><input type="radio" name="colour" id="colour" value="rand" checked> Random</td>
    </tr>
    <tr>
      <td><input type="radio" name="colour" id="colour" value="0"> <div class="colourSample c0"></div></td>
      <td><input type="radio" name="colour" id="colour" value="1"> <div class="colourSample c1"></div></td>
      <td><input type="radio" name="colour" id="colour" value="2"> <div class="colourSample c2"></div></td>
      <td><input type="radio" name="colour" id="colour" value="3"> <div class="colourSample c3"></div></td>
       <td><input type="radio" name="colour" id="colour" value="4"> <div class="colourSample c4"></div></td>
    </tr>
  </table>
  <table class="printedTable">
    <!-- An actual table to be printed -->
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td>Sit amat</td>
    </tr>
  </table>
  <input id="generate" type="button" class="noprint" value="generate!">
  <input id="print" type="button" class="noprint" value="print!">
</div>

这里的问题是，当我尝试打印页面（使用 ctrl+p 或打印按钮）时，要打印的表格上没有显示背景图像。带有颜色样本的 Divs - 看起来不错，按钮（它们也有它们的 css，我只是没有包括它） - 很棒，但无论如何表格都是透明的。它是页面上唯一由 jQuery 生成的元素。我在这里想念什么？我知道默认情况下大多数网络浏览器不会打印 bg 图像，但我确保这里不是这种情况（我认为 - 其他背景正在显示）。

【问题讨论】：

更新：尝试使用默认 bg-img 打印静态的、刚刚加载的页面会导致相同的结果。所以可能不是 jQuery 问题。
跟浏览器有关，你用的是什么浏览器？
我也忘了提到我在这个项目中使用了引导程序。
@Mohammad 我认为它不一定与浏览器相关，因为我同时在 Firefox 和 Chrome 上测试它。我使用的是 ubuntu 18.04.1，我的主要浏览器是 Firefox。

标签： javascript jquery html css

【解决方案1】：

检查这个color-adjust

在打印时，浏览器可能会选择忽略所有背景图像并调整文本颜色，以确保优化对比度以在白纸上阅读。

所以你添加以下 css 属性来绕过这个：

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

reference answer

【讨论】：