0

Есть калькулятор, созданный в системе 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

3 ответа 3

1

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

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

}

0

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

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

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

1
  • Использовал вторую библиотеку. printJS('viewing_panel', 'html'), но результат прежний. Только теперь вся форма помещается на один лист. Как я уже писал к ответу ниже, мне кажется, я выбрал неправильный ID элемента.
    – FaNaT_96
    13 авг 2019 в 18:10
0

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

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

<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>
1
  • Результат тот же, что и с кодом, который приводил я. Может еще какие-то стили надо включить в медиа-запрос?
    – FaNaT_96
    13 авг 2019 в 18:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.