Как распечатать включить отображение рамки таблицы в печать?

Question

У меня проблема с отображением границы при печати. Ниже моя кодировка:

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

Мой вывод на печать как показано ниже, без рамки таблицы для отображения при печати:

Моя HTML страница:

Надеюсь, кто-нибудь поможет мне решить эту проблему. Спасибо.

Answer 1

Ваш CSS не сохраняется в новом окне во время печати. Вы можете передать некоторые CSS в новое окно в вашем методе document.write ()

например

$('.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();
})

Answer 2

проблема:

при рендеринге страницы HTML у него есть доступ ко всем стилям bootstrap (которые вы либо установили, либо используете cdn), когда вы генерируете страницу печати, которую создаете новый документ html и размещает только html, а не стили.

потенциальное решение:

добавьте cdn для bootstrap стилей в документ, который вы создаете для напечатайте так: wme.document.write('<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">')

дайте мне знать, сработало ли это!