浏览器打印，不显示图像

Question

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

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

JS

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

更新

我会解决我自己的问题。

这与"PrintThis“无关。

这是浏览器的“问题”。

但是在我加载img的Css文件中添加：!important很容易修复。

Answer 1

好的，所以没有办法让"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，它就会显示在打印中。

现在.。我希望函数可以使整个类变得重要，而不是将它添加到每一行中。

Answer 2

我的解决办法是

-webkit-打印-颜色-调整:准确！重要；

Answer 3

图像一般不打印，因为这是浏览器中的设置。

转到工具/互联网选项/Advanced /并确保“打印背景和图像”被勾选。

然而，没有办法让图像打印与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);
}