如何解决车把节点html-to-pdf报告允许在一页中显示一定数量的项目
我正在尝试打印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>
解决方法
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。