Print modal content without changing the style

Question

I have a modal with some data on it and I need to print it exactly like it is on the modal. I have some JavaScript to print the div where the content is but the problem is the bootstrap classes don't get recognized during the print and so the entire layout changes.

    function printDiv() {
      var winPrint = window.open();
      /*var header = '@include("report/header")';*/
      /*var body = '@include("memberpayment/monthlybill")';*/
      var body = document.getElementById('printarea').innerHTML;
      winPrint.document.write(body);
      winPrint.document.close();
      winPrint.focus();
      winPrint.print();
      winPrint.close();
}

my modal:

my print view:

From searching online it seems I need to include the bootstrap library before I write the print content (source)

This did not work for me as when I write a file before it gives a blank 2 pages on my print view. I've tried using the jQuery plugin printThis

4: https://www.jqueryscript.net/other/Customizable-Multiple-Elements-Printing-Plugin-With-jQuery-printThis.html which also did not work out.

in this questionit seems adding a media="print" to the link seemed to work aswell but it didn't work for me.

This is my Modal code:

    <div class="container-fluid" id="printarea" style="padding: 2rem 4rem;">
    <!-- ----------------------top heading part---------------------- -->
    <div class="row" style="border: 1px solid black;">
        <div class="col-md-4 center">
            @if(file_exists(public_path().'/bzBuilder/images/'.CNF_LOGO) && CNF_LOGO !='')
            <img src="{{ asset('bzBuilder/images/'.CNF_LOGO)}}" width="150" alt="{{ CNF_APPNAME }}"/>
            @else
            <img src="{{ asset('bzBuilder/images/logo.png')}}" width="150" alt="{{ CNF_APPNAME }}"/>
            @endif
        </div>
        <div class="col-md-8 center arial" style="font-weight: bold;">
            <p style="padding-top: 1rem;">
                Royal Bombay Yacht Club                
            </p>
            <p>
                C.S.M Marg, Apollo Bunder, Mumbai - 400001.Tel : +91-22-22021880 / 67527200.                
            </p>
            <p>
                Fax : +91-22-2202 1014 Email: rbycmail@vsnl.net & billing@rbyc.co.in
            </p>
        </div>            
    </div>
    <!-- ----------------------details and address ---------------------- -->
    <div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12">
            <p><b>GODREJ ADI BURJOR ESQ., [G0014 ]</b></p>
            <br>
            <p>
                OFFICE - GODREJ INDUSTRIES LIMITED,
                PIROJSHANAGAR, EASTERN EXPRESS HIGHWAY, VIKHROLI, MUMBAI - 400 079
            </p>
        </div>
        <div class="col-md-6 col-sm-12 col-xs-12" style="border: 1px solid black;">
            <div class="inline-block col-md-6 col-sm-12 col-xs-12">Membership No: <b>G0014</b></div>
            <div class="inline-block col-md-6 col-sm-12 col-xs-12">Bill Dated: <b>21/08/2018</b></div>
            <div class="inline-block col-md-6 col-sm-12 col-xs-12">BillRef : <b>G0014-8</b></div>
            <div class="inline-block col-md-6 col-sm-12 col-xs-12">Due Date: <b>15/10/2018</b></div>
        </div>
    </div>
    <br>
    <!-- ----------------------from/to date ---------------------- -->
    <div class="row centerWhenSmall">
        <div class="col-md-3 col-sm-12">From: <b>01-Aug-2018</b></div>
        <div class="col-md-3 col-sm-12">To: <b>31-Aug-2018</b></div>
    </div>
    <!-- ----------------------table top part---------------------- -->
    <div class="row tablePadding">
        <table class="customTable">
            <tr>
                <th>Narration</th>
                <th class="center">Dr.</th>
                <th class="center">Cr.</th>
            </tr>
        </table>
    </div>
    <!-- ----------------------table mid part---------------------- -->
    <div class="row tablePadding2">
        <table class="customTable2">
            <tr>
                <th>BNo:32775 on 21/08/18 - DINING ROOM</th>
                <th class="borderBottom center">1,082.00 </th>
                <th class="borderBottom center"></th>
            </tr>
        </table>
    </div>
    <!-- ----------------------table body---------------------- -->
    <div class="row tablePadding3">
        <table class="customTable3">
            {{--<tr>--}}
                {{--<th class="center">Monthly Total : </th>--}}
                {{--<th class="center">1,082.00</th>--}}
                {{--<th class="center">0.00</th>--}}
            {{--</tr>--}}
            {{--<tr>--}}
                {{--<th class="center">Previous Outstanding : </th>--}}
                {{--<th class="borderBottom center">0.00</th>--}}
                {{--<th class="borderBottom center">0.00</th>--}}
            {{--</tr>--}}
            {{--<tr>--}}
                {{--<th class="center">Amount Due/Credit Balance : </th>--}}
                {{--<th class="borderBottom center">1,082.00</th>--}}
                {{--<th class="borderBottom center">0.00</th>--}}
            {{--</tr>--}}
        </table>
    </div>
    <br>
    <!-- ----------------------disclaimer---------------------- -->
    <div class="row">
        <div class="col-md-12 col-sm-12 center">
            This is a computer generated invoice and does not require signature .
        </div>
        <div class="col-md-12 col-sm-12">
            Bill Dated : 21/08/2018
        </div>
        <div class="col-md-12 col-sm-12 borderBottom">
            <b>To be cleared by : 15/October/2018</b>
        </div>        
    </div>
    <!-- ----------------------notice---------------------- -->
    <div class="row">
        <div class="col-md-12 col-sm-12" style="margin-bottom: 3%;">
            IF YOUR BILL SHOWS ARREARS,THEN ENTIRE AMOUNT BE PAID IMMEDIATELY.
        </div>
        <div class="col-md-12" style="text-decoration: underline;">
            Amount Due/Credit Balance Is As On 31 August 2018. Subsequent Payments Will Be Credited In The Following Month.
        </div>
        <div class="col-md-12">
            PAYMENT RECEIVED AFTER DUE DATE ATTRACT DELAYED PAYMENT CHARGES @ 2% ON OUTSTANDING AMOUNT
        </div>
        <div class="col-md-12">
            <b style="font-weight: 900">REQUEST INFORM DETAILS OF PAYMENT MADE BY BANK TRANSFER/NEFT/RTGS/ BY EMAIL TO
            accounts@rbyc.co.in and billing@rbyc.co.in FOR PROMPT UPDATION OF MEMBERS ACCOUNT</b>
        </div>
        <div class="col-md-12">
            Beneficiary : Royal Bombay Yacht Club
        </div>
    </div>
    <!-- ----------------------bank details---------------------- -->
    <div class="row">
        <div class="col-md-6">
            <b style="font-weight: 800">HDFC BANK</b><br>
            REGAL CINEMA BUILDING,<br> 
            SHAHID BHAGATSINGH ROAD,<br> 
            MUMBAI - 400 039<br>
            Current Account No : <b>00852530000017</b><br>
            SWIFT NO: <b>HDFCINBB</b> [ OVERSEAS TRANSFER ]*<br>
            IFSC NO: <b>HDFC0000085</b> [ IN INDIA TRANSFER ] *
        </div>
        <div class="col-md-6">
            <b style="font-weight: 800">YES BANK LTD.</b><br> 
            Mittal Chambers, Nariman Point,<br>
            MUMBAI - 400 021<br>
            Savings Account No : <b>000494600000162</b><br>
            SWIFT NO : <b>YESBINBB</b> [ OVERSEAS TRANSFER]*<br>
            IFSC NO : <b>YESB0000004</b> [ IN INDIA TRANSFER ]*
        </div>
    </div>
    <!-- ----------------------notice 2---------------------- -->
    <div class="row">
        <div class="col-md-12" style="font-weight: 900">
            MEMBERS ARE REQUESTED TO CARRY THEIR MEMBERSHIP CARD AND PRODUCE IT WHEN PLACING AN
            ORDER.THIS IS TO AVOID ANY ERRORS IN BILLING.
        </div>
    </div>
    <!-- ----------------------vat tin pan gst---------------------- -->
    <div class="row">
        <div class="col-md-9" style="font-size: 1.3rem; width: 70%;">
            <div class="col-md-4">VAT TIN : 27720003820V</div>
            <div class="col-md-4">PAN : AAAAR0071R</div>
            <div class="col-md-4">GST : 27AAAAR0071R1Z7</div>            
        </div>
        <div class="col-md-6"></div>
    </div>
    <!-- ----------------------bottom paragraph---------------------- -->
    <div class="row">
        <div class="col-md-12">
            I/We certify that our S.T registration Certificate under B.S.T Act 1959 is in force on the date on which the sale of the goods
            specified in this bill/cash memorandum and that the transactions of sale covered by this bill/cash memorandum has been
            effected by us in the regular course of our business.
        </div>
    </div>
    <!-- ----------------------disclaimer 2---------------------- -->
    <div class="row">
        <div class="col-md-12 col-sm-12 center">
            This is a computer generated invoice and does not require signature .
        </div>
    </div>
    <!-- ----------------------bottom---------------------- -->
    <div class="row" style="margin-top: 20%;">
        <div class="col-md-12 center">
            --------------------------------------PLEASE TEAR OFF AND SEND THIS WITH YOUR CASH/CHEQUE------------------------------------
        </div>
        <div class="col-md-12 center">
            I am sending herewith cash/cheque for Rs.___________________ in payment of BillRef :
            G0014-8 dated: 21/08/2018 Name: GODREJ ADI BURJOR ESQ., [G0014 ]
        </div>
    </div>
    <!-- ----------------------print---------------------- -->
</div>
<div class="row" style="margin-bottom: 5%; ">
    <div class="col-md-5"></div>
    <div class="col-md-3">
        <button style="text-align: center;" type="button" onclick='printDiv();' class="btn btn-primary btn-sm print-bill"><i
            class="fa fa-print"></i> Print
        </button>
<!-- <button style="text-align: center;" type="button" class="btn btn-primary btn-sm print-bill">
<i class="fa fa-print"></i> Print
</button> -->
<button type="button" class="btn btn-info btn-sm pay-bill" data-toggle="modal" data-target="#paybill">PAY
</button>
</div>
<div class="col-md-4"></div>
</div>

1. include bootstrap css in the HTML file also. (OR take another copy of it for print). 2. In Bootstrap css file, the there are few places where the css styles are applicable to the '@media screen', so change it to the '@media all'. — Guruling Kumbhar, Dec 27 '18 at 11:52
i have tried including the bootstrap css in the file but it dosent seem to get ignored when prining. im not sure i fully understand your second solution(edit: i have changed '@media screen' to '@media all' and it didnt do anything im afraid) — Man In The Wall, Dec 27 '18 at 11:59
you need to add bootstrap classes for print media also. check if this link helps you - https://daneveland.com/content/printing-bootstrap — Guruling Kumbhar, Dec 27 '18 at 12:30
tried adding that to my modal page and the bootstrap css file both of that didnt work. is there any way i can add the necessary bootstrap stuff for print before "winPrint.document.write(body);" because i feel like thats the issue. as soon as it gets written the bootstrap becomes irrelevant and sometimes the '@media print' stuff dosent work aswell. — Man In The Wall, Dec 27 '18 at 12:58
@ManInTheWall There is a lot of sensitive data in your print document, you should avoid posting the document here. Just join an exemple. — hathija, Dec 27 '18 at 14:11

Guruling Kumbhar · Answer 1 · 2018-12-27T19:56:25.180

1

When creating Html for printing, kindly note that the element css floating doesn't work very well in cross browser for HTML printing.

so, to quick fix your issue, kindly add below css inside the modal HTML (at the beginning) -

<style>
     /* this stylesheet is used when generating a PDF */
        /* define a page */
        @page {
         size: auto;  /* OR 6.5in 8.5in; A4 */
         margin-top: 0.5cm;
         margin-left: 0.5cm;
         margin-right: 0.5cm;
        } 
     @media print {

          [class*="col-md-"] {
            float: none;
            display:table-cell;
          }

          [class*="col-lg-"] {
            float: none;
            display:table-cell;
          }

         }
</style>

Additionally, in your html there is scope to do the refinements to make it more compatible for printing.

I hope this may help you.

edited Dec 27 '18 at 19:56

answered Dec 27 '18 at 19:47

Guruling Kumbhar

1,039
1
8
18

When developing HTML for the printing, for the complex layout instead of 'floating' I usually use the Table structure. – Guruling Kumbhar Dec 27 '18 at 19:50
the '@media print' dosent seem to be working on this page. im familiar with it because ive used it before in this project but i just did a test. i added a class called test in the media print then made its background-color: red !important; but it dosent get recognized in the print. i do have to ask, since bootstrap not being taken into consideration in print would it be simpler for me to just write the whole modal in html and css only ? and try to get the responsiveness with just that ? – Man In The Wall Dec 28 '18 at 05:07
to show background color in a print preview, along with the background-color property you have to add additional css ' -webkit-print-color-adjust: exact;' for tht element. – Guruling Kumbhar Dec 28 '18 at 07:08

Print modal content without changing the style

1 Answers1