1

I have a project where I am using CSS Twitter-bootstrap 3.3 to design my application.

There is a section on my page that I need to print on standard 8.5 x 11 sheet of paper. However, I want that printable div to appear on the screen exactly how it will print on the paper.

It is my understanding that I need to add .visible-print-block class to the divider to make its content printable. However, I like to show the printable content with a proper width so the printable version looks like the visible on-browser version. Also, the .visible-print-block class hides the divider from the browser, but I want to show it on the browser and when it gets printed.

Here is my HTML code

<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>

Here is my JS code which triggers the print.

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

The content of the "print_section_en" divider is what I want to make printable yet make it visible on the browser identical or very similar to how it will look on the paper.

Junior
  • 11,602
  • 27
  • 106
  • 212
  • I would suggest to use a plugin for tasks like this. Have a look [here](https://www.jqueryscript.net/demo/jQuery-Plugin-For-Html-Print-Preview-printPreview/). Since you are using bootstrap it is possible that these plugins does not work properly. Read more about in [this question](https://stackoverflow.com/questions/12302819/how-to-create-a-printable-twitter-bootstrap-page). Good luck! – Tommy Oct 02 '18 at 08:22

0 Answers0