Question

我有一个项目，正在使用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”分隔符的内容是我希望使其可打印，但使其在浏览器中可见的方式与在纸上的外观相同或非常相似。

如何显示div的内容以准确显示其在8.5 x 11纸上的打印方式？

0 个答案: