打印
场景描述
将数据按照一定的格式生成pdf文件，用于打印
实现思路
使用打印组件，自定义打印模板，调用打印组件的打印操作生成pdf文件
实现步骤
1. 在页面上添加打印组件
在高级分类中找到打印组件，拖拽到页面上
打印时如果默认要横向打印可以在打印参数中设置--orientation Landscape,注意是字符的方式添加，如下：
2. 自定义打印模板文件
进入“代码”页面，在UI2目录下，新建文件，文件后缀为.print.tpl。例如新建/UI2/mobile/yongpin_sz.w.print.tpl文件。
设置打印组件的"打印模板"属性为/UI2/mobile/yongpin_sz.w.print.tpl
2.1. 打印一个数据集中的数据
打印效果如下图所示
例如打印用品数据集，用品数据集的结构如下图所示
在页面上添加用品数据集组件，设置打印组件的"打印数据"属性为用品数据集
打印模板文件内容如下
<html>
<head>
<meta charset="UTF-8">
<title>用品设置</title>
<style type="text/css">
.head{
}
.footer {
}
.table {
border: 1px solid #dddddd;
}
.print-item{
display: table-row;
page-break-inside: avoid;
}
.print-item > .print-item-label,
.print-item > .print-item-value{
border: 1px solid #dddddd;
padding: 8px;
display: table-cell;
}
.print-item > .print-item-label{
width: 30%;
vertical-align: middle;
text-align: center;
}
.table ,
.child-table > .print-item-value{
padding: 0;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
.child-table > .print-item-value{
margin: -1px;
}
.printer,.print-date{
padding-left: 60%;
}
.Image > .print-item-value > img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body style="margin: 28px;">
<div class="head">
<h1 class="title">用品设置</h1>
</div>
<div class="table">
{{#each data}}
<div class='print-item String'>
<div class='print-item-label'>名称</div>
<div class='print-item-value'>{{{mingcheng}}}</div>
</div>
<div class='print-item DateTime'>
<div class='print-item-label'>创建时间</div>
<div class='print-item-value'>{{{chuangjiansj}}}</div>
</div>
<div class='print-item Integer'>
<div class='print-item-label'>库存</div>
<div class='print-item-value'>{{{kucun}}}</div>
</div>
<div class='print-item String'>
<div class='print-item-label'>库管员</div>
<div class='print-item-value'>{{{kuguanyLabel}}}</div>
</div>
{{/each}}
</div>
<div class="footer">
<h4 class="printer">打印人：{{context.printer}}</h4>
<h4 class="print-date">打印时间：{{context.printDate}}</h4>
</div>
</body>
</html>
打印模板说明
{{#each data}} data是规定写法，指的是打印数据属性对应的数据集，each是遍历数据集的每一行，即不是打印数据集的当前行，而是打印数据集中的所有行。如果包括从表，可打印从表，参考“打印主从数据”
{{{mingcheng}}} mingcheng是列标识，用于打印列内容
如果不不需要循环数据，而是打印数据集的当前行数据，不需要写each,在要打印的数列的地方用{{data.[0].mingcheng}}即可
{{context.printer}} 系统默认值，用于打印当前人
{{context.printDate}} 系统默认值，用于打印当前时间
style中的样式均可自行调整
注意：要打印当前人需要在页面上放上下文组件
2.2. 打印主从数据
打印效果如下图所示，这是桌面端的打印效果，目前移动端和企业桌面端不支持打印多条主数据，只能打印一条主数据及其从数据
打印主从表，只设置打印组件的“打印数据”属性为主表数据集即可
打印模板文件内容如下
<html>
<head>
<meta charset="UTF-8">
<title>消费项目</title>
<style type="text/css">
.head{
}
.footer {
}
.table {
border: 1px solid #dddddd;
}
.print-item{
display: table-row;
page-break-inside: avoid;
}
.print-item > .print-item-label,
.print-item > .print-item-value{
border: 1px solid #dddddd;
padding: 8px;
display: table-cell;
}
.print-item > .print-item-label{
width: 30%;
vertical-align: middle;
text-align: center;
}
.table ,
.child-table > .print-item-value{
padding: 0;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
.child-table > .print-item-value{
margin: -1px;
}
.printer,.print-date{
padding-left: 60%;
}
.Image > .print-item-value > img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body style="margin: 28px;">
<div class="head">
<h1 class="title">消费项目</h1>
</div>
<div class="table">
{{#each data}}
<div class='print-item String'>
<div class='print-item-label'>消费项目</div>
<div class='print-item-value'>{{{xiaofeixm}}}</div>
</div>
{{#if dbmxiaofei_xmxiaofeimx}}
<div class='print-item child-table'>
<div class='print-item-label'>消费明细</div>
<div class='print-item-value'>
{{#each dbmxiaofei_xmxiaofeimx}}
<div class='print-item Date'>
<div class='print-item-label'>日期</div>
<div class='print-item-value'>{{{_deft_riji}}}</div>
</div>
<div class='print-item Double'>
<div class='print-item-label'>金额(元)</div>
<div class='print-item-value'>{{{_deft_jine_y__}}}</div>
</div>
<div class='print-item String'>
<div class='print-item-label'>大写</div>
<div class='print-item-value'>{{{_deft_jine_y__Chn}}}</div>
</div>
{{/each}}
</div>
</div>
{{/if}}
{{/each}}
</div>
<div class="footer">
<h4 class="printer">打印人：{{context.printer}}</h4>
<h4 class="print-date">打印时间：{{context.printDate}}</h4>
</div>
</body>
</html>
打印模板说明
{{#each dbmxiaofei_xmxiaofeimx}} dbmxiaofei_xmxiaofeimx是从数据的id
{{#if dbmxiaofei_xmxiaofeimx}} 是判断是否有从数据
2.3. 打印非主从数据
当需要打印的数据不只一个数据集，也不是一主一从或一主多从数据集时， 可在打印组件的“附加数据”属性中选择要在打印模板中访问的数据集
打印模板文件内容如下
<html>
<head>
<meta charset="UTF-8">
<title>打印非主从数据</title>
<style type="text/css">
.head{
}
.footer {
}
.table {
border: 1px solid #dddddd;
}
.print-item{
display: table-row;
page-break-inside: avoid;
}
.print-item > .print-item-label,
.print-item > .print-item-value{
border: 1px solid #dddddd;
padding: 8px;
display: table-cell;
}
.print-item > .print-item-label{
width: 30%;
vertical-align: middle;
text-align: center;
}
.table ,
.child-table > .print-item-value{
padding: 0;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
.child-table > .print-item-value{
margin: -1px;
}
.printer,.print-date{
padding-left: 60%;
}
.Image > .print-item-value > img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body style="margin: 28px;">
<div class="head">
<h1 class="title">打印非主从数据</h1>
</div>
<div class="table">
{{#each data}}
<div class='print-item String'>
<div class='print-item-label'>单行文本</div>
<div class='print-item-value'>{{{_deft_danxingwb}}}</div>
</div>
<div class='print-item LongText'>
<div class='print-item-label'>多行文本</div>
<div class='print-item-value'>{{{_deft_duoxingwb}}}</div>
</div>
{{/each}}
</div>
{{#each context.datas.restData1}}
<div class='print-item String'>
<div class='print-item-label'>用品</div>
<div class='print-item-value'>{{{name}}}</div>
</div>
{{/each}}
<div class="footer">
<h4 class="printer">打印人：{{context.printer}}</h4>
<h4 class="print-date">打印时间：{{context.printDate}}</h4>
<h4 class="print-date">我的用品：{{context.datas.restData1.[0].name}}</h4>
</div>
</body>
</html>
打印模板说明
{{#each context.datas.restData1}} restData1是数据集的id，在打印模板中访问附加数据中的数据集的方法是context.datas.数据集id
{{context.datas.restData1.[0].name}} 表示取出restData1数据集中第一行name列的值
4. 测试打印模板文件
打印模板是使用Handlebars创建的语义模板，网上有很多测试Handlebars模板的网站，例如：https://handlebarsjs.com/playground.html 输入打印模板和数据，检验模板的正确性，以及查看运行效果
数据可以从打印操作的请求中获取，调用打印操作时，系统发送file请求。 在浏览器中打开开发人员工具，在network中查看file请求
下面是发送内容
type: pdf
template: /UI2/mobile/dayin.w.print.tpl
rows: [{"fid":"C8D60FEE42B0000187F35C5719EDF9A0","_deft_duoxingwb":"22","_deft_danxingwb":"11","fcreateDate":""}]
context: {"printer":"system","printDate":"2020-03-20","datas":{"restData1":[{"fid":"C8D60BAFC7800001FE511DE0790010E9","name":"一体机"},{"fid":"C8D60BB1CF000001DD9CD68016881849","name":"笔记本"}]}}
其中
- rows是“打印数据”属性对应的数据集中的数据，如果有从表，会包括从表数据
context.datas是“附加数据”属性包括的数据集中的数据
测试打印模板时，数据为
{
data: [{"fid":"C8D60FEE42B0000187F35C5719EDF9A0","_deft_duoxingwb":"22","_deft_danxingwb":"11","fcreateDate":""}],
context: {"printer":"system","printDate":"2020-03-20","datas":{"restData1":[{"fid":"C8D60BAFC7800001FE511DE0790010E9","name":"一体机"},{"fid":"C8D60BB1CF000001DD9CD68016881849","name":"笔记本"}]}}
}