2016-11-17 2 views
1

Я создал один div, внутри которого используется некоторый css (через файл css). Теперь я хочу напечатать этот конкретный div со всей страницы. Проблема, с которой мне сталкивается, что все классы css применяются в диалоговом окне печати, но цвет фона не применяется.Цвет фона html не отправляется по умолчанию. Диалоговое окно печати

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

$("#btnPrint").click(function() { 
    var contents = $("#Call").html(); 
    var frame1 = $('<iframe />'); 
    frame1[0].name = "frame1"; 
    frame1.css({ "position": "absolute", "top": "-1000000px" }); 
    $("body").append(frame1); 
    var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument; 
    frameDoc.document.open(); 
    //Create a new HTML document. 
    frameDoc.document.write('<html><head><title>Call</title>'); 
    frameDoc.document.write('</head><body>'); 
    //Append the external CSS file. 
    frameDoc.document.write('<link href="../css/abc.css" rel="stylesheet" type="text/css">'); 
    //Append the DIV contents. 
    frameDoc.document.write(contents); 
    frameDoc.document.write('</body></html>'); 
    frameDoc.document.close(); 
    setTimeout(function() { 
     window.frames["frame1"].focus(); 
     window.frames["frame1"].print(); 
     frame1.remove(); 
    }, 500);}); 

Вот является моим DIV на странице: enter image description here

Вот диалоговое окно печати, который показывает предварительный просмотр div: enter image description here

Пожалуйста, помогите мне применить диалог фоновой печати.

Благодаря

+0

Изменения параметров печати компоновки хрома. Отвяжите поле «блок bg». Он находится в «дополнительных настройках» –

+0

Вы не можете использовать код, чтобы изменить его, но –

+0

возможный дубликат http: // stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color –

ответ

2

Вариант 1: -

Если вы не возражаете о совместимости браузера используйте

-webkit-print-color-adjust: exact; 

это будет работать only in chrome

Вариант 2: -

Чтобы сделать его пригодным для печати (с изображением и цветами) во всех браузерах, вы должны сделать все элементы печати без фонового изображения и цветов фона. Вместо них используют image tag and border colors с @media print (read more)


Руководство Опции: -

вы должны вручную проверить фон печати (Chrome: "фоновой графики", Firefox: "Печать фона") при печати. это отобразит как фоновые цвета, так и фоновые изображения. мы не можем контролировать печать через код, если вы относитесь к совместимости с браузером.

Chrome: -

print web pages with background in Chrome

Firefox: -

[print web pages with background in Firefox[3]

+0

нам нужна эта функция печати, работающая во всех браузерах, и нам не нужна ручная настройка в браузере. Я следую этой ссылке и в этой работе правильно работает http://www.aspsnippets.com/Articles/Print-DIV-contents-with-CSS-using-JavaScript-and-jQuery.aspx во всех браузерах. –

+0

Я обновил это – jafarbtech

1

для хрома и сафари вы можете заставить цвет печать фона по -webkit-print-color-adjust property правилу, например

body { 
-webkit-print-color-adjust: exact; 
} 

подробнее о нем here

Смежные вопросы