Как отправить содержимое div на печать? js

29 мая 2021, 05:00

Есть калькулятор, созданный в системе ucalc. Необходимо вывести для печати все окно калькулятора. Попытался сделать это следующим образом

function printEl() {
 var printContents = document.getElementById("viewing_panel").innerHTML;
 var originalContents = document.body.innerHTML;
 document.body.innerHTML = printContents;
 window.print();
 document.body.innerHTML = originalContents;
}
$(".button-28").on('click', function() {
    printEl();
});

В хроме создается файл pdf, но там не отображаются значения, которые я выбираю для элементов. т.е. стоит поставить у checkbox галочку, но в документе это не отобразится. Подскажите, как правильно отправить всю форму с калькулятором на печать? Он будет встраиваться в страницу сайта, поэтому нужно выбирать именно по определенному элементу, а не всю страницу целиком. Скрипт калькулятора закинул сюда: http://91.215.153.78/angar.html

Answer 1

Вопрос решился следующим образом:

@media print {
#viewing_panel {
    -webkit-print-color-adjust: exact; 
}

}

Answer 2

Вижу что вы jQuery используете. Вот есть плагин специально для этого http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

Работает как-то так: $('#viewing_panel').printElement();

Вот еще библиотека есть, которая тем же самым занимается https://printjs.crabbly.com/, только без jQuery (и судя, по всему, гораздо качественнее чем предыдущая либа).

Answer 3

Можно, для печати блока, стиль указать.

Например так:

<style>
@media print {
    #viewing_panel {
        position: fixed;
        background-color: white;
        height: 100%;
        width: 100%;
        margin: 0;
        font-size: 14px;
        line-height: 16px;
        padding: 12px;
        top: 0;
        left: 0;
    }
}
</style>