Как отобразить содержимое div, чтобы оно точно отображалось на листе бумаги размером 8,5 x 11? - PullRequest
Новая
       8

Как отобразить содержимое div, чтобы оно точно отображалось на листе бумаги размером 8,5 x 11?

0 голосов
/ 02 октября 2018

У меня есть проект, в котором я использую CSS Twitter-bootstrap 3.3 для разработки своего приложения.

На моей странице есть раздел, который мне нужно распечатать на стандартном 8,5 x 11 листах бумаги.Однако я хочу, чтобы печатная форма div отображалась на экране в точности так, как она будет печататься на бумаге.

Насколько я понимаю, мне нужно добавить класс .visible-print-block в разделитель, чтобы сделать его содержимое пригодным для печати.,Однако мне нравится показывать печатный контент с правильной шириной, чтобы печатная версия выглядела как видимая версия в браузере.Кроме того, класс .visible-print-block скрывает разделитель от браузера, но я хочу показать его в браузере и когда он будет напечатан.

Вот мой HTML-код 

<div class="panel panel-default">

    <div class="panel-header clearfix">
        <div class="pull-right">
            <button id="print" class="btn btn-primary" role="button" data-target-print="#print_section_en">
                <span class="glyphicon glyphicon-print" /> Print Letter
            </button>
        </div>
    </div>

    <div class="panel-body">
        <div class="well visible-print-block" id="print_section_en">
            <p>Some <strong>printable</strong> content goes here...</p>
            <p>Second paragraph...</p>
            <div class="row">
                <div class="col-md-6">
                    <dl class="dl-horizontal">
                        <dt>Name</dt>
                        <dd>Fullname</dd>
                    </dl>
                </div>

                <div class="col-md-6">
                    <dl class="dl-horizontal">
                        <dt>Date</dt>
                        <dd>Todays's date</dd>
                    </dl>
                </div>
            </div>
            <p>Third paragraph...</p>
        </div>
    </div>

</div>

Здесьмой код JS, который запускает печать. 

<script>
$(function(){
    $('#print').click(function(){
        window.print();
    });
});
</script>

Содержимое разделителя "print_section_en" - это то, что я хочу сделать печатным, но сделать его видимым в браузере идентичным или очень похожим на то, как оно будет выглядетьбумага.

...