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

【问题标题】：Different Font Size When Print Using Javascript使用 Javascript 打印时字体大小不同
【发布时间】：2017-09-29 12:09:29
【问题描述】：

我目前正在做一个需要打印结果的项目。用户可以使用直接在主页上找到的按钮将其打印出来，或者使用在某些引导模式中找到的按钮。问题是当用户尝试从模态按钮打印时，字体大小将与使用主页上的按钮不同，并且我已经使用单独的 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

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

【问题讨论】：

如何打印？
这不是 PHP 问题。 PHP 只是生成内容。使用您的开发者控制台检查元素，看看有什么不同。可以是 CSS 或元素的默认样式。
@madalinivascu 我目前正在将数据填充到某个隐藏的 div 中，然后调用 window.print() 进行打印
您为打印编写的 CSS 是什么？
能否请您发布您的js 和html 代码？

标签： javascript php jquery css twitter-bootstrap

【解决方案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链接，示例及完整解释。

【讨论】：