牛刀云打印组件如何使用

云刀牛 · 发表于 2021-9-8 17:51:42

老师好
在使用牛刀云实现小程序过程中
我需要将数据表中的信息导出为PDF
看到牛刀云组件中有个“打印”组件相符合
但是如何使用无说明
文档中也没有查到
请给予支持
谢谢

jishuang · 发表于 2021-9-9 16:41:43

1. 在页面上添加打印组件
在高级分类中找到打印组件，拖拽到页面上

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是列标识，用于打印列内容
{{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模板的网站，例如：http://tryhandlebarsjs.com。输入打印模板和数据，检验模板的正确性，以及查看运行效果

数据可以从打印操作的请求中获取，调用打印操作时，系统发送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":"笔记本"}]}}
   }

云刀牛 · 发表于 2021-9-9 18:43:24

谢谢老师的回复，太感谢您啦！

马搏士 · 发表于 2021-9-9 23:07:59

经过测试，发现开发环境能够正常生成pdf并支持下载，如图1 开发环境.jpg

但发布到测试环境，file请求正常，但下一步获取文件报错，返回：文件导出错误如图2 测试环境.jpg

对比两个环境发现一些不一样的地产（cookie）不知是否是这个原因导致导出失败？麻烦实际测试一下是否是平台问题？

马搏士 · 发表于 2021-9-11 22:26:16

正式环境导入后第二个请求报如此错误

云刀牛 · 发表于 2021-9-14 11:30:57

非常感谢牛刀电话接线员耐心的听我多次对此问题的陈述
期待在您的协调下
此“打印组件”功能
能够成功实施
相信牛刀云！！！！

云刀牛 · 发表于 2021-9-16 23:01:10

牛刀的大佬们,能帮回复下这个帖子吗?
关于“打印组件”的问题
感谢!

gaofan · 发表于 2021-9-18 14:07:24

这个平台这边先确认下测试环境问题后回复。

gaofan · 发表于 2021-9-18 18:55:43

确认测试环境打印不能生成pdf文件问题是缺陷，已记录问题，待处理后告知。

云刀牛 · 发表于 2021-9-18 21:24:07

感谢牛刀云老师的回复
我会一直跟踪此问题
希望可以尽快得到方案
谢谢啦

		自动登录	找回密码
密码			注册

[处理中] 牛刀云打印组件如何使用