Печать содержимого прокручиваемого div

У меня есть контракт, который отображается в прокручиваемом div. Я хотел бы дать моим пользователям возможность распечатать содержимое прокручиваемого div. Длина div составляет примерно три страницы. Я использую bootstrap для этого приложения и попробовал доступный для меня класс «видимый-печатный». Когда я тестирую функциональность печати сейчас, только то, что находится в верхней части прокручиваемого div, отображается на экране предварительного просмотра хрома с вертикальной полосой прокрутки и отключает оставшееся содержимое.Печать содержимого прокручиваемого div

CSS:

#scrollableDiv{ 
    width: 100%; 
    height: 700px; 
    overflow-y: scroll; 
} 

@media print, 
(-o-min-device-pixel-ratio: 5/4), 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi) { 
} 

@media print { 
* { 
    background: transparent !important; 
    color: #000 !important; /* Black prints faster: h5bp.com/s */ 
    box-shadow: none !important; 
    text-shadow: none !important; 
    } 

    thead { 
    display: table-header-group; /* h5bp.com/t */ 
    } 

    tr, 
    img { 
    page-break-inside: avoid; 
    } 

    img { 
    max-width: 100% !important; 
    } 

    @page { 
    margin: 0.5cm; 
    } 

    p, 
    h2, 
    h3 { 
    orphans: 3; 
    widows: 3; 
    } 

    h2, 
    h3 { 
    page-break-after: avoid; 
    } 

    .visible-print { 
    display: block !important; 
    overflow: visible; 
    } 
}

HTML:

<div id="scrollableDiv" class="margin-bottom-20"> 
    <div class="visible-print"> 
     <!-- CONTRACT CONTENTS HERE --> 
    </div> 
</div>

источник

2015-07-08 Questifer

Это '# scrollabeDiv' единственное, что нужно напечатать? Рассматривали ли вы открытие одного и того же содержимого в пустом окне и 'window.print()' it, чтобы не печатать остальную страницу? Будет ли это работать на вас? –

Это возможность. Есть ли способ сделать это, не жертвуя UX? Я не уверен, как пользователи будут чувствовать, что контракт предоставлен на отдельной странице/вкладке, а затем нажать кнопку печати. – Questifer

Я чувствую, что нормально открыть печатный контент в новом окне. Вы можете запустить команду печати, запустив в окне 'window.print()', поэтому пользователям не нужно нажимать кнопку печати. Также попробуйте ответить @Sun_Sparxz и сообщите нам, если он сработает. –

Попробуйте

@media print { 
       #scrollableDiv{ 
        width: 100%; 
        height: 100%; 
       } 
       .visible-print{ 
       display: block; 
       width: auto; 
       height: auto; 
       overflow: visible; 
       } 
       }

источник

2015-07-08 18:52:35

Сохранение только первой страницы div в предварительном просмотре печати в хроме с помощью полосы прокрутки сбоку. – Questifer

, пожалуйста, попробуйте то, что я отредактировал, извините за это –

Я дал ему попробовать и имел очень похожий результат. Несколько строк текста были отображены на странице. Я все еще очень смущен. Я продолжу работу над этой проблемой сегодня вечером и отчитаюсь. – Questifer

Хотя это не точный ответ на ваше решение, вы можете посмотреть на этом примере:

http://www.cloudformatter.com/CSS2Pdf.CustomTipsTricks.ContinuedTableHeaders

Таблица в этом образце внутри прокручиваемой области и всей таблицы относится к PDF. Мы разработали это решение для рендеринга, чтобы преодолеть многие ограничения в простой печати на основе браузера.

источник

2015-07-09 00:06:02

ответ Sun_Sparxz в выше достаточно прочный, но я хотел бы добавить каверзный вопрос вы можете столкнуться ...

Через несколько часов я понял, что я имел «позицию: фиксированную» в моем теле тега мешающий вышеупомянутое решение от работы. Убедитесь, что вы удалили это, или ваша логика печати может не работать. Как только я это сделал, мультимедийный тег работал как ожидалось.

источник

2017-05-16 15:39:53

Печать содержимого прокручиваемого div

ответ

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