I'm trying to print some "chosen" content on my webpage with printThis jQuery plugin. When I press print_btn, no images or <hr> are shown in the print. Why?

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

JS

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

UPDATE

I´ll answear my own question.
This has nothing to do with "PrintThis".
It´s a browser "issue".
But it was easy fixed with adding: !important in my Css file where i load the img.

I'm trying to print some "chosen" content on my webpage with printThis jQuery plugin. When I press print_btn, no images or <hr> are shown in the print. Why?

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

JS

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

UPDATE

I´ll answear my own question.
This has nothing to do with "PrintThis".
It´s a browser "issue".
But it was easy fixed with adding: !important in my Css file where i load the img.

• javascript
• jquery
• html
• css
• printthis

Share Improve this question Follow edited Nov 26, 2015 at 14:05 Björn C asked Nov 25, 2015 at 9:32 Björn CBjörn C 4,0081111 gold badges5252 silver badges8787 bronze badges 3

• Images should be printing - do you have an example page? I am the printThis author, so I would like to track down any bugs. – Jason Commented Nov 26, 2015 at 13:11
• Here's a demo showing that images work: jsbin./lelefihowe/edit?output – Jason Commented Nov 26, 2015 at 13:23
• 1 @Jason all i had to do was to add "!important" in my CSS where i load the img. So, it´s not a "PrintThis" issue. Thank you. – Björn C Commented Nov 26, 2015 at 14:02

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

My solution was to implement

-webkit-print-color-adjust: exact !important;

images generally do not print, as this is a setting in the browser.

Go to Tools / Internet Options /Advanced / and make sure that "Print Background and Images" is ticked.

However, there's no workaround to get images to print with printThis plugin.

If you want to try print image with jquery you can do like this : http://jsfiddle/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);
}

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

try this

Ok, so there is no way to make "PrintThis" print my images.
But i found a way in 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;
}

Just add !importantafter each line and it shows in the print.
Now.. i´d like a funktion to make a whole class important, instead of adding it to every row.