Question

我目前正在开发一个需要打印结果的项目。用户可以使用主页上直接找到的按钮打印出来，也可以使用某些bootstrap模式中的按钮打印出来。问题是当用户尝试从模式按钮打印时，字体大小将与使用主页上的按钮不同，并且我已经使用单独的css进行打印。任何解决方案或者您知道导致问题的原因是什么？感谢

这是css代码

@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;
    }
}

这是用于打印的js

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

<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

注意字体和页面总数的差异。

Answer 1

如果你想申请你的css，你应该加载你的css文件，如下所示：

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();

有关详情，请参阅Designing for print with css链接，示例及完整说明。

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

1 个答案: