I would like to print a bootstrap div.

It is properly displayed in web browser but when I click on the print button then at print preview, the elements are floating and are not properly displayed.

what should I do to solve this problem ?

Div which I want to print with following this style

What I get the output at printing time which I dont want see on school name at the top

Button which call the print function:

<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style="    font-size: 17px;"> Print</i></button>

Print Function:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

Div which i Want to print

<div class="container right-container col-md-6" id="printableArea" style="display:block;">
    <span id="link7">   
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h3 id="school_title"><?php echo "$school_name";?> </h3>
                <p><p> 
                <p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p> 
                <div class="row">
                    <div class="col-md-4">
                        <div class="header-time-date-marks">
                            <span id="exam_time">Time: 12 AM - 2 PM</span>
                            <span id="exam_date">Date: 30/12/2016</span>
                        </div>
                    </div>
                    <div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
                        <span id="exam_marks">100 Marks</span>
                    </div>
                </div>
            </div>
        </div>
        <hr / id="line" style="margin-top: 13px;">
        <div class="row q-question-type-style" id='question_section'>
        </div>
    </span>
</div>

I would like to print a bootstrap div.

It is properly displayed in web browser but when I click on the print button then at print preview, the elements are floating and are not properly displayed.

what should I do to solve this problem ?

Div which I want to print with following this style

What I get the output at printing time which I dont want see on school name at the top

Button which call the print function:

<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style="    font-size: 17px;"> Print</i></button>

Print Function:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

Div which i Want to print

<div class="container right-container col-md-6" id="printableArea" style="display:block;">
    <span id="link7">   
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h3 id="school_title"><?php echo "$school_name";?> </h3>
                <p><p> 
                <p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p> 
                <div class="row">
                    <div class="col-md-4">
                        <div class="header-time-date-marks">
                            <span id="exam_time">Time: 12 AM - 2 PM</span>
                            <span id="exam_date">Date: 30/12/2016</span>
                        </div>
                    </div>
                    <div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
                        <span id="exam_marks">100 Marks</span>
                    </div>
                </div>
            </div>
        </div>
        <hr / id="line" style="margin-top: 13px;">
        <div class="row q-question-type-style" id='question_section'>
        </div>
    </span>
</div>

• javascript
• jquery
• html
• ajax
• twitter-bootstrap

• Research how to create a stylesheet for media="print" – Rory McCrossan Commented Dec 15, 2016 at 8:36
• @RoryMcCrossan Thanks for replay and effort to provide solution. I have created external css also but at the end i doesn't get the solution so it become necessary to ask for help. – Muhammad Haris Commented Dec 15, 2016 at 8:40

6 Answers 6

Check this solution: It is working. The <div> is able to display for print.

Place your <script>-tag above the <html>-tag:

<script>
<html>

https://jsfiddle.net/6cz5br7m/

It's working, just try it on your Editor.

<!-- Your Jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <!-- Another Jquery version, which will be compatible with PrintThis.js -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <!-- CDN/Reference To the pluggin PrintThis.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.js"
        integrity="sha512-Fd3EQng6gZYBGzHbKd52pV76dXZZravPY7lxfg01nPx5mdekqS8kX4o1NfTtWiHqQyKhEGaReSf4BrtfKc+D5w=="
        crossorigin="anonymous"></script>

    <script type="text/javascript">
        // important : to avoid conflict between the two version of Jquery
        var j = jQuery.noConflict(true);

        // define a function that you can call as an EventListener or whatever you want ...
        function Print_Specific_Element() {
            // the element's id must be unique .. 
            // you can't print multiple element, but can put them all in one div and give it an id, then you will be able to print them !
            // use the 'j' alias to call PrintThis, with its compatible version of jquery 
            j('#specificElement').printThis({
                importCSS: true, // to import the page css
                importStyle: true, // to import <style>css here will be imported !</style> the stylesheets (bootstrap included !)
                loadCSS: true, // to import style="The css writed Here will be imported !"
                canvas: true // only if you Have image/Charts ... 
            });
        }

        $("#printBtn").click(Print_Specific_Element);
    </script>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- It's very important to include the attribute : media='all'-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" media='all'
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <style>
        @media print {
            @page {
                /* To give the user the possibility to choise between landscape and portrait printing format */
                size: auto;
                /* setting custom margin, so the date and the url can be displayed */
                margin: 40px 10px 35px;
            }

            /* Here you can give a custom styling which will be applied only while printing  */
            a,
            button#printBtn {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="container" id="Page">
        <div>
            this Element will not be printed
        </div>
        <div id="specificElement" class="bg-primary m-2 p-2 text-center rounded" style="border: 2px solid black;">
            <div class="jumbotron">
                <h1 class="display-3">
                    My custom content which I want to print
                </h1>
                <p class="lead">Another element</p>
                <hr class="my-2">
                <p>Nothing ... just another element </p>
                <button id="printBtn" class="btn btn-success btn-sm shadow">
                    CLick Me !
                    <br>
                    (Dont worry I will not be printed)
                </button>
            </div>

        </div>
    </div>

    
</body>

</html>

Call this function: PrintElem('printableArea')

function PrintElem(elem){
        var mywindow = window.open('', 'PRINT', 'height=400,width=600');

        var css = "";
        var myStylesLocation = "${pageContext.request.contextPath}/ui/css/bootstrap.min.css";

        $.ajax({
            url: myStylesLocation,
            type: "POST",
            async: false
        }).done(function(data){
            css += data;
        }) 

        mywindow.document.write('<html><head><title></title>');
        mywindow.document.write('<style type="text/css">'+css+' </style>');
      //  mywindow.document.write('<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/css/bootstrap.min.css" type="text/css" media="print"/>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<h1>' + document.title  + '</h1>');
        mywindow.document.write(document.getElementById(elem).innerHTML);
        mywindow.document.write('</body></html>');
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10*/

        mywindow.print(); 
        mywindow.close();


        return true;
    }

You can try @media print in css. Like bellow

In css

 @media print
   {
      p.bodyText {font-family:georgia, times, serif;}
      .noprint
      {
        display:none
      }
   }

In Html

<div class="noprint">
I dont want it on print
</div>
<br><br>
<div>
Prrintable Area
</div>

Fiddle

I was able to look for the section that was undesirably appearing in the print of the modal, and just hiding it, while using your print function:

  print() {
    let mainLayout = document.querySelector('app-main-layout') as HTMLDivElement;
    mainLayout.style.display = 'none';

    window.print();

    mainLayout.style.display = 'unset';
  }

And, make the buttons of my modal go away, by using this css:

@media print {
  button.close {display:none !important;}
}

you just need to link your js script properly

<!DOCTYPE html>
<html>
<body>

<div class="container right-container col-md-6" id="printableArea" style="display:block;">
    <span id="link7">   
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h3 id="school_title"><?php echo "$school_name";?> </h3>
                <p><p> 
                <p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p> 
                <div class="row">
                    <div class="col-md-4">
                        <div class="header-time-date-marks">
                            <span id="exam_time">Time: 12 AM - 2 PM</span>
                            <span id="exam_date">Date: 30/12/2016</span>
                        </div>
                    </div>
                    <div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
                        <span id="exam_marks">100 Marks</span>
                    </div>
                </div>
            </div>
        </div>
        <hr / id="line" style="margin-top: 13px;">
        <div class="row q-question-type-style" id='question_section'>
        </div>
    </span>
</div>

 <div> <h1>
 asdads
 </h1>
</div>


<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style="    font-size: 17px;"> Print</i></button>
<script>
function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}
</script>

</body>
</html>