Печать содержимого div с использованием css

Я работаю над проектом, и я хочу печатать содержимое div. Код, который я использую, выполняет мои требования, но я получаю простой вывод без применения Css к нему, а также не получая изображение. Пожалуйста, помогите мне. Я прикрепляю код и вывод, который я получаю и вывод хочу.

код:

function PrintElem(elem) {
    Popup($(elem).html());
}

function Popup(data) {
    var mywindow = window.open('', 'new div', 'height=400,width=600');
    mywindow.document.write('<html><head><title></title>');
    mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.print();
    mywindow.close();

    return true;
}

Выход, который я получаю до нажатия кнопки печати:

Выход, который я получаю, нажав кнопку печати:

Ответ 1

Вам нужно изменить свойство css media на print. Добавьте новую строку в свою функцию createPopup(), как показано ниже:

mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"print\"/>" );

Ответ 2

Если вы хотите сделать CSS, вы должны добавить тайм-аут перед его печатью, потому что требуется некоторое время, чтобы CSS был применен к HTML, и вы сможете его распечатать.

Попробуйте следующее:

function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}

Ответ 3

Мое предложение - добавить в тег <body> некоторый javascript для печати и закрытия.

<body onload="window.print();window.close()">

Выполнение этого всегда позволит достаточно времени для загрузки документа и CSS до того, как откроется окно печати, а затем закроет окно сразу после закрытия диалога печати.

Ответ 4

Если вы используете изображение в качестве фонового изображения сайта, вы, безусловно, не получите его, а при печати браузера отключите все фоновые изображения.

Попробуйте использовать теги img. Также убедитесь, что в вашем браузере отключить функцию изображения не отмечено.

Ответ 5

Возможная причина проблемы с рендерингом может быть связана с относительными путями, которые вы используете для файла CSS и изображений. Сначала попробуйте использовать абсолютные пути. Тот факт, что HTML-структура визуализируется, исключает проблемы с созданием нового документа HTML. Кроме того, добавьте media="print" в элемент link.

Этот код работает, хотя частично:

    (function() {

function createPopup( data ) {
    var mywindow = window.open( "", "new div", "height=400,width=600" );
    mywindow.document.write( "<html><head><title></title>" );
    mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\"/>" );
    mywindow.document.write( "</head><body >" );
    mywindow.document.write( data );
    mywindow.document.write( "</body></html>" );

    mywindow.print();
    //mywindow.close();

    return true;

}
document.addEventListener( "DOMContentLoaded", function() {
    document.getElementById( "print" ).addEventListener( "click", function() {
        createPopup( document.getElementById( "content" ).innerHTML );

    }, false );

});

   })();

Я удалил вызов .close(). Имейте в виду, что некоторые стили CSS могут не работать с печатью.

Ответ 6

       function printpage() {
           var getpanel = document.getElementById("<%= Panel1.ClientID%>");
           var MainWindow = window.open('', '', 'height=500,width=800');
           MainWindow.document.write('<html><head><title></title>');
           MainWindow.document.write("<link rel=\"stylesheet\" href=\"styles/Print.css\" type=\"text/css\"/>");
           MainWindow.document.write('</head><body onload="window.print();window.close()">');
           MainWindow.document.write(getpanel.innerHTML);
           MainWindow.document.write('</body></html>');
           MainWindow.document.close();
           setTimeout(function () {
               MainWindow.print();
           }, 500)
           return false;

}

Ответ 7

Передайте div для печати в качестве входных данных для функции печати,

<input type='button' id='btn-print' value='Print Receipt' onclick="printDiv('#invoice-box-id');" />

Затем клонируйте элемент,

function printDiv(elem)
{
   renderMe($('<div/>').append($(elem).clone()).html());
}

Передайте клонированный элемент для рендеринга, включите в него таблицу стилей.

function renderMe(data) {
    var mywindow = window.open('', 'invoice-box', 'height=1000,width=1000');
    mywindow.document.write('<html><head><title>invoice-box</title>');
    mywindow.document.write('<link rel="stylesheet" href="printstyle.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    setTimeout(function () {
    mywindow.print();
    mywindow.close();
    }, 1000)
    return true;
}

Если innerHTML передан, он будет игнорировать стили.