Question

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

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

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图像，但我确保这里不是这样（我想-其他背景正在显示）。

Answer 1

选中此color-adjust

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

因此您要添加以下CSS属性以绕过此操作：

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

reference answer

jQuery生成的bg图像无法打印

1 个答案: