Печать DIV, сохраняя CSS

я пытаюсь отправить на печать "div", в котором появляется " подтверждение заказа, я не могу сохранить стили CSS, когда он открывает окно печати.

Это моя функция: 

function printDiv(divVer) {
        var printContents = document.getElementById(divVer).innerHTML;
        var document_html = window.open("_blank");
         document_html.document.write( "<html><head><title>Imprimir Pedido</title>" );
         document_html.document.write( "<link rel=\"stylesheet\" type=\"text/css\" href=\"css/styles.css\" media=\"all\">" );
         document_html.document.write( "</head><body>" );
         document_html.document.write( printContents );
         document_html.document.write( "</body></html>" );
         setTimeout(function () {
               document_html.print();
           }, 500)
}

$(document).on('click','#imprimirPedido' ,function() {
    printDiv('divVer')
});

и это DIV для печати: 

          <div id="divVer" class="columna">
              <h4 class="titulo">Detalles del Pedido</h4>
          </div>

пуст, так как он заполняется из ajax, но случай, который теряет css:

Esto es el DIV Est es lo que me sale al Imprimir

  • Как я могу это исправить? Спасибо и с уважением.
Author: Javier Avila Fernandez, 2018-08-30
Source

2 answers

Вы можете использовать @media. Существует специальный стиль для управления стилями, используемыми в печати:

CSS

@media print {
  /* Reglas CSS para impresión */
}

Вы также можете использовать другую таблицу стилей для стилей печати. Этот способ выполнения в основном поддерживается браузерами:

HTML

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
 4
Author: phpMyGuel, 2018-08-30 08:48:39

Ну, по-видимому, есть простое решение с google Crome дает вам вариант, который говорит "фоновые графики" и ясно, отметив этот вариант будет выглядеть так, как вы хотите.... удачи

 0
Author: alfredo jesus teran, 2019-08-26 18:45:49