起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 318|回复: 9

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

[复制链接]

6

主题

16

帖子

69

积分

初级会员

Rank: 2

积分
69
QQ
发表于 2021-9-8 17:51:42 | 显示全部楼层 |阅读模式
老师好
在使用牛刀云实现小程序过程中
我需要将数据表中的信息导出为PDF
看到牛刀云组件中有个“打印”组件相符合
但是如何使用无说明
文档中也没有查到
请给予支持
谢谢

打印PDF.png

90

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
33901
发表于 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. 打印一个数据集中的数据
在页面上添加用品数据集组件,设置打印组件的"打印数据"属性为用品数据集

打印模板文件内容如下

  1.         <html>

  2.            <head>

  3.               <meta charset="UTF-8">

  4.               <title>用品设置</title>

  5.               <style type="text/css">

  6.                  .head{

  7.                  }

  8.                  .footer {

  9.                  }

  10.                  .table {

  11.                     border: 1px solid #dddddd;

  12.                  }

  13.                  .print-item{

  14.                     display: table-row;

  15.                     page-break-inside: avoid;

  16.                  }

  17.                  .print-item > .print-item-label,

  18.                  .print-item > .print-item-value{

  19.                     border: 1px solid #dddddd;

  20.                     padding: 8px;

  21.                     display: table-cell;

  22.                  }

  23.                  .print-item > .print-item-label{

  24.                     width: 30%;

  25.                     vertical-align: middle;

  26.                     text-align: center;

  27.                  }

  28.                  .table ,

  29.                  .child-table > .print-item-value{

  30.                     padding: 0;

  31.                     border-collapse: collapse;

  32.                     border-spacing: 0;

  33.                     width: 100%;

  34.                     display: table;

  35.                  }

  36.                  .child-table > .print-item-value{

  37.                     margin: -1px;

  38.                  }

  39.                  .printer,.print-date{

  40.                     padding-left: 60%;

  41.                  }

  42.                  .Image > .print-item-value > img{

  43.                     max-width: 100%;

  44.                     height: auto;

  45.                  }

  46.               </style>

  47.            </head>

  48.            <body style="margin: 28px;">

  49.               <div class="head">

  50.                  <h1 class="title">用品设置</h1>

  51.               </div>

  52.               <div class="table">

  53.                  {{#each data}}

  54.                     <div class='print-item String'>

  55.                        <div class='print-item-label'>名称</div>

  56.                        <div class='print-item-value'>{{{mingcheng}}}</div>

  57.                     </div>

  58.                     <div class='print-item DateTime'>

  59.                        <div class='print-item-label'>创建时间</div>

  60.                        <div class='print-item-value'>{{{chuangjiansj}}}</div>

  61.                     </div>

  62.                     <div class='print-item Integer'>

  63.                        <div class='print-item-label'>库存</div>

  64.                        <div class='print-item-value'>{{{kucun}}}</div>

  65.                     </div>

  66.                     <div class='print-item String'>

  67.                        <div class='print-item-label'>库管员</div>

  68.                        <div class='print-item-value'>{{{kuguanyLabel}}}</div>

  69.                     </div>

  70.                  {{/each}}

  71.               </div>

  72.               <div class="footer">

  73.                  <h4 class="printer">打印人:{{context.printer}}</h4>

  74.                  <h4 class="print-date">打印时间:{{context.printDate}}</h4>

  75.               </div>

  76.            </body>

  77.         </html>
复制代码

打印模板说明

{{#each data}} data是规定写法,指的是打印数据属性对应的数据集,each是遍历数据集的每一行,即不是打印数据集的当前行,而是打印数据集中的所有行。如果包括从表,可打印从表,参考“打印主从数据”
{{{mingcheng}}} mingcheng是列标识,用于打印列内容
{{context.printer}} 系统默认值,用于打印当前人
{{context.printDate}} 系统默认值,用于打印当前时间
style中的样式均可自行调整


2.2. 打印主从数据
打印效果如下图所示,这是桌面端的打印效果,目前移动端和企业桌面端不支持打印多条主数据,只能打印一条主数据及其从数据
打印主从表,只设置打印组件的“打印数据”属性为主表数据集即可

打印模板文件内容如下

  1.         <html>

  2.            <head>

  3.               <meta charset="UTF-8">

  4.               <title>消费项目</title>

  5.               <style type="text/css">

  6.                  .head{

  7.                  }

  8.                  .footer {

  9.                  }

  10.                  .table {

  11.                     border: 1px solid #dddddd;

  12.                  }

  13.                  .print-item{

  14.                     display: table-row;

  15.                     page-break-inside: avoid;

  16.                  }

  17.                  .print-item > .print-item-label,

  18.                  .print-item > .print-item-value{

  19.                     border: 1px solid #dddddd;

  20.                     padding: 8px;

  21.                     display: table-cell;

  22.                  }

  23.                  .print-item > .print-item-label{

  24.                     width: 30%;

  25.                     vertical-align: middle;

  26.                     text-align: center;

  27.                  }

  28.                  .table ,

  29.                  .child-table > .print-item-value{

  30.                     padding: 0;

  31.                     border-collapse: collapse;

  32.                     border-spacing: 0;

  33.                     width: 100%;

  34.                     display: table;

  35.                  }

  36.                  .child-table > .print-item-value{

  37.                     margin: -1px;

  38.                  }

  39.                  .printer,.print-date{

  40.                     padding-left: 60%;

  41.                  }

  42.                  .Image > .print-item-value > img{

  43.                     max-width: 100%;

  44.                     height: auto;

  45.                  }

  46.               </style>

  47.            </head>

  48.            <body style="margin: 28px;">

  49.               <div class="head">

  50.                  <h1 class="title">消费项目</h1>

  51.               </div>

  52.               <div class="table">

  53.                  {{#each data}}

  54.                     <div class='print-item String'>

  55.                        <div class='print-item-label'>消费项目</div>

  56.                        <div class='print-item-value'>{{{xiaofeixm}}}</div>

  57.                     </div>

  58.                     {{#if dbmxiaofei_xmxiaofeimx}}

  59.                        <div class='print-item child-table'>

  60.                           <div class='print-item-label'>消费明细</div>

  61.                           <div class='print-item-value'>

  62.                              {{#each dbmxiaofei_xmxiaofeimx}}

  63.                                 <div class='print-item Date'>

  64.                                    <div class='print-item-label'>日期</div>

  65.                                    <div class='print-item-value'>{{{_deft_riji}}}</div>

  66.                                 </div>

  67.                                 <div class='print-item Double'>

  68.                                    <div class='print-item-label'>金额(元)</div>

  69.                                    <div class='print-item-value'>{{{_deft_jine_y__}}}</div>

  70.                                 </div>

  71.                                 <div class='print-item String'>

  72.                                    <div class='print-item-label'>大写</div>

  73.                                    <div class='print-item-value'>{{{_deft_jine_y__Chn}}}</div>

  74.                                 </div>

  75.                              {{/each}}

  76.                           </div>

  77.                        </div>

  78.                     {{/if}}

  79.                  {{/each}}

  80.               </div>

  81.               <div class="footer">

  82.                  <h4 class="printer">打印人:{{context.printer}}</h4>

  83.                  <h4 class="print-date">打印时间:{{context.printDate}}</h4>

  84.               </div>

  85.            </body>

  86.         </html>
复制代码

打印模板说明

{{#each dbmxiaofei_xmxiaofeimx}} dbmxiaofei_xmxiaofeimx是从数据的id
{{#if dbmxiaofei_xmxiaofeimx}} 是判断是否有从数据
2.3. 打印非主从数据
当需要打印的数据不只一个数据集,也不是一主一从或一主多从数据集时, 可在打印组件的“附加数据”属性中选择要在打印模板中访问的数据集

打印模板文件内容如下


  1.       <html>

  2.            <head>

  3.               <meta charset="UTF-8">

  4.               <title>打印非主从数据</title>

  5.               <style type="text/css">

  6.                  .head{

  7.                  }

  8.                  .footer {

  9.                  }

  10.                  .table {

  11.                     border: 1px solid #dddddd;

  12.                  }

  13.                  .print-item{

  14.                     display: table-row;

  15.                     page-break-inside: avoid;

  16.                  }

  17.                  .print-item > .print-item-label,

  18.                  .print-item > .print-item-value{

  19.                     border: 1px solid #dddddd;

  20.                     padding: 8px;

  21.                     display: table-cell;

  22.                  }

  23.                  .print-item > .print-item-label{

  24.                     width: 30%;

  25.                     vertical-align: middle;

  26.                     text-align: center;

  27.                  }

  28.                  .table ,

  29.                  .child-table > .print-item-value{

  30.                     padding: 0;

  31.                     border-collapse: collapse;

  32.                     border-spacing: 0;

  33.                     width: 100%;

  34.                     display: table;

  35.                  }

  36.                  .child-table > .print-item-value{

  37.                     margin: -1px;

  38.                  }

  39.                  .printer,.print-date{

  40.                     padding-left: 60%;

  41.                  }

  42.                  .Image > .print-item-value > img{

  43.                     max-width: 100%;

  44.                     height: auto;

  45.                  }

  46.               </style>

  47.            </head>

  48.            <body style="margin: 28px;">

  49.               <div class="head">

  50.                  <h1 class="title">打印非主从数据</h1>

  51.               </div>

  52.               <div class="table">

  53.                  {{#each data}}

  54.                     <div class='print-item String'>

  55.                        <div class='print-item-label'>单行文本</div>

  56.                        <div class='print-item-value'>{{{_deft_danxingwb}}}</div>

  57.                     </div>

  58.                     <div class='print-item LongText'>

  59.                        <div class='print-item-label'>多行文本</div>

  60.                        <div class='print-item-value'>{{{_deft_duoxingwb}}}</div>

  61.                     </div>

  62.                  {{/each}}

  63.               </div>

  64.               {{#each context.datas.restData1}}

  65.                  <div class='print-item String'>

  66.                     <div class='print-item-label'>用品</div>

  67.                     <div class='print-item-value'>{{{name}}}</div>

  68.                  </div>

  69.               {{/each}}

  70.               <div class="footer">

  71.                  <h4 class="printer">打印人:{{context.printer}}</h4>

  72.                  <h4 class="print-date">打印时间:{{context.printDate}}</h4>

  73.                  <h4 class="print-date">我的用品:{{context.datas.restData1.[0].name}}</h4>

  74.               </div>

  75.            </body>

  76.         </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":"笔记本"}]}}
     }

远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

6

主题

16

帖子

69

积分

初级会员

Rank: 2

积分
69
QQ
 楼主| 发表于 2021-9-9 18:43:24 | 显示全部楼层
谢谢老师的回复,太感谢您啦!
回复 支持 反对

使用道具 举报

155

主题

379

帖子

862

积分

高级会员

Rank: 4

积分
862
QQ
发表于 2021-9-9 23:07:59 | 显示全部楼层
经过测试,发现开发环境能够正常生成pdf并支持下载,如图1 开发环境.jpg
但发布到测试环境,file请求正常,但下一步获取文件报错,返回:文件导出错误 如图2 测试环境.jpg
对比两个环境 发现一些不一样的地产(cookie) 不知是否是这个原因导致导出失败?麻烦实际测试一下是否是平台问题?
回复 支持 反对

使用道具 举报

155

主题

379

帖子

862

积分

高级会员

Rank: 4

积分
862
QQ
发表于 2021-9-11 22:26:16 | 显示全部楼层
执行失败.png
正式环境导入后 第二个请求报如此错误   
回复 支持 反对

使用道具 举报

6

主题

16

帖子

69

积分

初级会员

Rank: 2

积分
69
QQ
 楼主| 发表于 7 天前 | 显示全部楼层
非常感谢牛刀电话接线员耐心的听我多次对此问题的陈述
期待在您的协调下
此“打印组件”功能
能够成功实施
相信牛刀云!!!!
回复 支持 反对

使用道具 举报

6

主题

16

帖子

69

积分

初级会员

Rank: 2

积分
69
QQ
 楼主| 发表于 5 天前 | 显示全部楼层
牛刀的大佬们,能帮回复下这个帖子吗?
关于“打印组件”的问题
感谢!
回复 支持 反对

使用道具 举报

10

主题

2814

帖子

3734

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3734
QQ
发表于 3 天前 | 显示全部楼层
这个平台这边先确认下测试环境问题后回复。
需要发应用及正式服务器请在服务群里联系QQ:516367879。
回复 支持 反对

使用道具 举报

10

主题

2814

帖子

3734

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3734
QQ
发表于 3 天前 | 显示全部楼层
确认测试环境打印不能生成pdf文件问题是缺陷,已记录问题,待处理后告知。
需要发应用及正式服务器请在服务群里联系QQ:516367879。
回复 支持 反对

使用道具 举报

6

主题

16

帖子

69

积分

初级会员

Rank: 2

积分
69
QQ
 楼主| 发表于 3 天前 | 显示全部楼层
感谢牛刀云老师的回复
我会一直跟踪此问题
希望可以尽快得到方案
谢谢啦
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2021-9-21 01:47 , Processed in 0.075837 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表