浏览器打印，不显示图像答案

【问题标题】：Browser print, doesn´t show images浏览器打印，不显示图像
【发布时间】：2016-02-28 00:41:26
【问题描述】：

我正在尝试使用 printThis jQuery 插件在我的网页上打印一些“选择”的内容。当我按print_btn 时，打印中没有图像或<hr> 显示。为什么？

HTML

<button id="print_btn"></button>
<div class="elementBricka display" style="page-break-after:always">
    <div class="lkbLoggo"></div>
    <hr>
     ....

CSS

#elementBrickor{
    align-items: center;
}

.elementBricka{
    width: 9.614cm;
    height: 14.404cm;
    border: 1px solid;
    background-color: white;

    float: none;
    margin-left: auto;
    margin-right: auto;
}
.lkbLoggo{
    width: 9.182cm;
    height: 2.721cm;
    margin-top: 0.199cm;
    background-image: url("/img/lkb_logga2.png");
    background-repeat: no-repeat;
    background-position: center;
}

$(document).ready(function () {
    $('#print_btn').click(function () {
        $('.display').printThis({
            debug: true,
            importCSS: true,
            importStyle: true,
            loadCSS: "/Data.css",
            pageTitle: false,
        });
    });
});

更新

我会回答我自己的问题。
这与“PrintThis”无关。
这是一个浏览器“问题”。
但是通过在我加载 img 的 Css 文件中添加：!important 很容易解决。

【问题讨论】：

应该打印图像 - 你有示例页面吗？我是 printThis 的作者，所以我想追查任何错误。
这是一个演示图像工作的演示：jsbin.com/lelefihowe/edit?output
@Jason 我所要做的就是在我加载 img 的 CSS 中添加“！important”。所以，这不是“PrintThis”问题。谢谢。

标签： javascript jquery html css printthis

【解决方案1】：

我的解决方案是实施

-webkit-print-color-adjust: 精确！重要；

【讨论】：

太棒了！这是唯一适合我的解决方案..这是最简单的方法！

【解决方案2】：

图像通常不会打印，因为这是浏览器中的设置。

转到工具/Internet 选项/高级/并确保选中“打印背景和图像”。

但是，没有解决方法可以使用 printThis 插件打印要打印的图像。

如果您想尝试使用 jquery 打印图像，您可以这样做：http://jsfiddle.net/8dXvt/626/

function nWin() {
  var w = window.open();
  var html = $("#toNewWindow").html();
  /*for(var i=0;i<5;i++){
  $("#toNewWindow").clone().prependTo("body")
 }*/
 $(w.document.body).html(html);
 setTimeout(function(){w.print()}, 1500);
}

【讨论】：

有趣。谢谢。
我找到了!important 来做我的工作。这更好，因为它可以在每个浏览器中工作，而无需更改浏览器中的任何选项。谢谢。
图像确实适用于 printThis - 这是一个演示图像工作的演示：jsbin.com/lelefihowe/edit?output

【解决方案3】：

$('.display').printThis({
base='true'
});

试试这个

【讨论】：

【解决方案4】：

好的，所以没有办法让“PrintThis”打印我的图像。
但我在 CSS 中找到了一种方法：

.lkbLoggo{
    width: 9.182cm !important;
    height: 2.721cm !important;
    margin-top: 0.199cm !important;
    background-image: url("/img/lkb_logga2.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

只需在每行之后添加!important，它就会显示在打印中。
现在..我想要一个使整个班级变得重要的功能，而不是将其添加到每一行。

【讨论】：