车把节点html-to-pdf报告允许在一页中显示一定数量的项目

编程问答 2022-08-16

问题描述

我正在尝试打印3 x 11张的条形码。我使用带有把手的HTML模板，并将其打印为pdf。我使用pdf-creator-node库，该库内部使用html-to-pdf库。有些产品名称很长，有些则很短。我需要的是为项目的固定数量设置页面。每页11行。如何在模板上完成此操作？如何在11行之后使报告跳至第二页？它可能与css page-break-after有关，但我不知道如何使用它。

BarcodeTemplate.html 

<head>
    <title>Bootstrap Tutorial Sample Page</title>
    <style type="text/css" rel="stylesheet" media="all">
</head>
    <body>
        <div class="container">
            {{#everyNth reportData 3}}
              {{#if isModZeroNotFirst}}
                </div>
              {{/if}}
              {{#if isModZero}}
                <div class="row">
              {{/if}}
              <div class="col-4 mx-auto">
                <img class="text-center" style="margin-bottom:1px;height:30px"  src="{{barcode_image}}" />
                <div class="text-center" style="font-size:9px;margin-top:-3px;margin-bottom:1px">{{barcode}}</div>
                <div class="text-center" style="font-size:9px;margin-top:-5px;margin-bottom:-3px;line-height: 9px">{{name}}</div>
                <div class="text-center" style="font-size:9px;margin-top:0px;margin-bottom:-5px">{{sku}}</div>
                <div class="text-center" style="font-size:9px;margin-top:-5px;margin-bottom:1px">{{intax_price}}</div>
              </div>
              {{#if isLast}}
                </div>
              {{/if}}
            {{/everyNth}}
        </div>
    </body>
</html>

enter image description here

解决方法

Handlebars.registerHelper('everyNth',function(context,every,options) {
      var fn = options.fn,inverse = options.inverse;
      var ret = "";
      if(context && context.length > 0) {
        for(var i=0,j=context.length; i<j; i++) {
          var modZero = i % every === 0;
          var jumpNextPage = (i!== 0 && i % 33 === 0)
          ret = ret + fn(_.extend({},context[i],{
            isModZero: modZero && !jumpNextPage,isModZeroNotFirst: modZero && i > 0,isLast: i === context.length - 1,isNextPage: jumpNextPage && modZero
          }));
        }
      } else {
        ret = inverse(this);
      }
      return ret;
    });


    <div class="container">
            {{#everyNth reportData columnCount}}
                {{#if isModZeroNotFirst}}
                    </div>
                {{/if}}
                {{#if isModZero}}
                    <div class="row">
                {{/if}}
                {{#if isNextPage}}
                    <div class="row" style="page-break-after:always;" >
                {{/if}}
                <div class='{{columnClass}}'>
                    {{#if show_barcode}}
                    <img class="text-center" style="margin-bottom:0px;height:30px"  src="{{barcode_image}}" />
                    {{/if}}
                    {{#if show_barcode_number}}
                    <div class="text-center" style="font-size:9px;margin-top:-3px;margin-bottom:0px">{{barcode}}</div>
                    {{/if}}
                    {{#if show_product_name}}
                    <div class="text-center" style="font-size:9px;margin-top:-3px;margin-bottom:-3px;line-height: 9px">{{name}}</div>
                    {{/if}}
                    {{#if show_sku}}
                    <div class="text-center" style="font-size:9px;margin-top:0px;margin-bottom:-5px">{{sku}}</div>
                    {{/if}}
                    {{#if show_intax_price}}
                    <div class="text-center" style="font-size:9px;margin-top:-5px;margin-bottom:1px">{{intax_price}}</div>
                    {{/if}}
                </div>
                {{#if isLast}}
                    </div>
                {{/if}}
            {{/everyNth}}
        </div>
handlebars.js