Solution 1 :

Your CSS is not being retained in new window while printing. You can get pass some CSS to the new window in your document.write() method

like

$('.btn').click(function(){
    var css = '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;'
        '}' +
        '</style>'
    var printme = document.getElementById('table');
    var printDoc = css + printme.outerHTML;    // note this added css
    var wme = window.open("","","width=900,height=700");
    wme.document.write(printDoc);
    wme.document.close();
    wme.focus();
    wme.print();
    wme.close();
})

Solution 2 :

issue:

when you render the HTML page it has access to all the bootstrap styles (that you either installed or are using a cdn), when you generate the print page you are creating a new html document and are only placing the html and not the styles.

potential solution:

add the cdn for bootstrap styles into the document that you are creating for printing like this:
wme.document.write('<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">')

let me know if that worked!

Problem :

I have a problem to show the border in the printing. Below is my coding:

button

<button class="btn btn-sm btn-primary">Print</button>

Table

 <table id="table" class="table table-bordered table-condensed table-hover table-striped dataTable">

Javascript

$('.btn').click(function(){
    var printme = document.getElementById('table');
    var wme = window.open("","","width=900,height=700");
    wme.document.write(printme.outerHTML);
    wme.document.close();
    wme.focus();
    wme.print();
    wme.close();
})

My printing output like below, no table border to show in the printing:

Output 2

My HTML page:

output 3
Hope someone can help me to solve it. Thanks.

Comments

Comment posted by emerson.marini

I’m not sure the styles defined by those classes are carried over to your new window, but that’s just a guess. Keep the window open so you can check how the table actually looks like on this new window.

Comment posted by rbansal

can you post a screenshot on how this table looks in the html page (not in the print screen)

By

Leave a Reply

Your email address will not be published. Required fields are marked *