使用Javascript打印时不同的字体大小

Question

I am currently working on a project that requires the result to be printed out. User can print it out using button directly found on the homepage, or using button found at some bootstrap modal. The problem is when user try to print from button at the modal, the font size will be different than using button found at the homepage, and I already using separate css for printing. Any solution or do you know what is causing the problem? Thanks

this is the css code

@media screen {
    #print-area {
        display: none;
    }
}

@media print {
    body * {
        visibility: hidden;
    }

    #print-area {
        display: inline;
    }

    #print-out-po, #print-out-po * {
        visibility: visible;
    }

    #print-out-po {
        position: absolute;
        left: 0.5cm;
        top: 0.5cm;

    }

    /*#print-out-po:last-child {
        page-break-after: auto;
    }*/

    #print-out-po h1, h2, h3, h4, h5, h6 {
        font-style: normal;
        font-family: sans-serif;
    }

    #print-out-po h1, .h1 {
        font-size: 48pt;
    }

    #print-out-po h2, .h2 {
        font-size: 42pt;
    }

    #print-out-po h3, .h3 {
        font-size: 36pt;
    }

    #print-out-po h4, .h4 {
        font-size: 30pt;
        font-weight: normal;
    }

    #print-out-po h5, .h5 {
        font-size: 24pt;
        font-weight: normal;
    }

    #print-out-po h6, .h6 {
        font-size: 18pt;
    }

    #print-out-po p {
        margin: 0 0 10px;
    }
}

this is the js i use to print

function BuyItem(item_id) {
    $.ajax({
        beforeSend: function () {
            $('#show-detail-modal').modal('hide');

            swal({
                title: 'Processing',
                text: '',
                showConfirmButton: false,
            });

            CleanPOArea();
        },
        url: 'shop/GetItem',
        type: 'POST',
        async: true,
        data: {
            'item_id': item_id,
        },
        success: function (json) {
            var item = $.parseJSON(json);

            if (item.item_stock <= 0) {
                swal('Maaf, Stok Barang Telah Habis, Silakan Kembali Lagi');
            }else {
                $('#item-id-po').html(item.item_id);
                $('#item-size-po').html(item.item_size);
                $('#item-cabinet-code-po').html(item.item_cabinet_code);
                $('#item-price-po').html("Rp " + parseInt(item.item_price).toLocaleString('id'));
            }
        },
        complete: function () {
            swal.close();

            window.print();
        }
    });
}

html part that i need to print

<div class="print-area" id="print-area">
            <div class="print-out-po" id="print-out-po">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12">
                                <h4>PURCHASE ORDER</h4>
                            </div>
                        </div>

                        <br>

                        <div class="row">
                            <div class="col-md-12">
                                <h5>Kode Desain</h5>
                            </div>
                            <div class="col-md-12">
                                <strong><h3 id="item-id-po"></h3></strong>
                            </div>
                        </div>

                        <br>


                        <div class="row">
                            <div class="col-md-12">
                                <h5>Ukuran</h5>
                            </div>
                            <div class="col-md-12">
                                <strong><h3 id="item-size-po"></h3></strong>
                            </div>
                        </div>

                        <br>


                        <div class="row">
                            <div class="col-md-12">
                                <h5>Kode Lemari</h5>
                            </div>
                            <div class="col-md-12">
                                <strong><h3 id="item-cabinet-code-po"></h3></strong>
                            </div>
                        </div>

                        <br>


                        <div class="row">
                            <div class="col-md-12">
                                <h5>Harga</h5>
                            </div>
                            <div class="col-md-12">
                                <strong><h3 id="item-price-po"></h3></strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

This is the photo when print using button on the homepage

This is when print using button on some modal

Notice the difference on the font and page total.

Answer 1

If you want to apply your css, you should load your css file like below:

var win = window.open('','printwindow');
    win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" href="http://localhost:8080/fin/pcd/css/printlib.css" type="text/css" /><link rel="stylesheet" href="css/main.css" type="text/css" /></head><body>');
    win.document.write($("#print_area").html());
    win.document.write('<div class="testPrint"></div><script>;</script></body></html>');
    win.print();

For more please refer to Designing for print with css link, examples with full explanation.