jquery print break-inside: avoid

原创

刀枪不入de王二花

修改于 2022-09-08 01:09:28

2260

修改于 2022-09-08 01:09:28

文章被收录于专栏：BETTER

印刷结果预览

print area 为单位印刷

实装方式

HTML

<div class="level-item">
    <button class="button is-black " id="print-all-btn">   <!-- 全体印刷 button-->
        <span>印刷</span>
    </button>
</div>

<!-- 全体印刷 范围 start-->
<div class="block print-all">

{% for key, supplier in supplier_dict.items %}
    <div class="card-custom can-print"><!-- 个别印刷 范围 start-->
        <div>
            略
        </div>
        <div>
            <button class="button is-black print-btn hideInPrint" > <!-- 印刷属性设定-->
                <span>印刷</span>
            </button>
        </div>
    </div><!-- 个别印刷 范围 end-->
{% endfor %}

</div><!-- 全体印刷 范围 end-->

印刷

<style>
    //印刷　全部
    $('#print-all-btn').on('click', function(e){
        $('.print-all').print();
    })
    //印刷　個別
    $('.print-btn').on('click', function(e){
        $(this).closest('.can-print').print();
    });
</style>

分页，指定area不截断，个别项目除外

<style>
    .can-print {
        break-inside: avoid;   // 指定area不截断
    }
    
    @media print {            // 指定area内、不印刷 （按钮，header，footer等 加上class hideInPrint）
        .hideInPrint{
            display: none;
        }
    }
</style>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

jquery