低代码学习教程:如何编辑自定义打印模版?

本文档详细介绍了如何创建和编辑自定义打印模板,包括设置表单字段、流程字段、修改模板名称、使用设计器调整边框、插入图片、设置背景图、调整单元格高度以及添加页眉页脚。此外,还提供了纸张设置、参考线说明和保存模板的操作步骤,旨在帮助用户更好地定制符合需求的打印模板。

1. 自定义模版入口

  • 表单设置 >>> 打印模板 >>> 新建打印模板

  • 点击编辑 > 进入设计区域自定义打印模版设计页面:

2. 修改模板名称

左上角可自定义模板名称

3. 表单字段&流程字段

  • 左侧列表中,包括「表单字段」,以及提交人、提交时间、更新时间这三个系统字段,可拖动放至指定位置。

  • 如果是流程表单,还会有一列「流程字段」,可添加审批意见。打印时审批意见内容显示为节点名称+负责人+审批意见+审批时间。

  • 列表中的字段表示字段值。见下图,把「日期」字段放至设计界面后,显示为「${日期}」。也就是说B2这个单元格代表的是,某条数据中日期控件的值,如2017/01/05。

  • 为了表示数据代表的意思,通常可以在字段值前面或者上面加上标题 。

  • 撤回字段。被添加到设计界面的字段,点击箭头可以进行撤销。

4. 设计器

(1)功能介绍

如果要取消边框线,在选中单元格后点击「边框线中的无边框」或者「边框线粗细中的无边框」。

(2)纸张设置

设置纸张大小,方向,页边距。注意参考线标注了打印时的边界,设计时不要超出,以免影响打印效果。

系统预设了几种常见的纸张大小,如A4,A5,也可以根据需要自定义纸张大小。

(3)参考线

  • 参考线标注了打印范围,位于参考线之内的内容可以被打印出来。
    注意:参考线和实际打印边界,并不是完全重合的,会存在不一致的情况。参考线标注的范围 始终 <= 实际打印范围

  • 解释:不管是输入的文字,还是拖动过来的表单字段,都是以单元格为单位的(只能放在单元格里面)。所以参考线是始终附在,最后一行/最后一列完全处于实际打印边界之内的单元格上,以保证参考线之内的单元格里的内容可以全部被打印出来。

  • 如果E列单元格的边框线,左移至与实际打印范围重合,那参考线也会与之重合(因为此时,E列就是完全位于打印范围内的最后一列)。

(4)插入图片

  • 可在单元格中插入图片,打印出来。常见用法如插入公司logo等。

  • 插入图片之后,可以通过改变单元格大小来调整图片大小,也可以设置图片对齐方式。

(5)背景图

可上传背景图,注意先将图片调整至与纸张长宽比例一致再上传,这样可以等比例缩放填充纸张。

打印背景开启后,打印时才会将背景图片一并打印出来。

(6)单元格高度设置

单元格高度推荐选择「动态高度」,打印时如果数据超出单元格高度,会自动拉伸以保证打印全部内容。如果是固定高度,则超出单元部分的内容,在打印时将被省略。

(7)页眉页脚

单击页眉页脚,进行设置;双击页眉页脚进行编辑、插入页码。

5. 保存

保存模板中的设计。

想要了解详情,可以前往百数官网: https://www.baishuyun.com/

### 宜搭打印模板的类型选择与最佳实践 在创建宜搭打印模板,选择合适的模板类型对于提升用户体验和简化开发流程至关重要。以下是关于宜搭打印模板类型的详细介绍以及最佳实践建议。 #### 1. 基于业务场景的选择 宜搭支持多种打印模板类型,常见的有 **PDF 模板**、**Word 模板** 和 **自定义 HTML 模板**。每种模板适用于不同的业务场景: - **PDF 模板**: PDF 格式的模板适合用于生成固定布局的内容,例如合同、发票或其他正式文档[^1]。由于其不可编辑特性,能够有效防止数据篡改。 - **Word 模板**: Word 模板更适合动态内容较多的场景,比如报告或申请表单。通过嵌入变量占位符,可以轻松实现个性化定制[^2]。 - **HTML 自定义模板**: 对于复杂交互需求或者高度灵活的设计要求,推荐使用 HTML 模板。开发者可以通过编写 CSS 和 JavaScript 来增强视觉效果及功能性[^3]。 #### 2. 技术选型考量因素 当决定采用哪种打印模板,需综合考虑以下几个方面: - **性能效率**: 如果项目追求高效渲染,则应优先选用轻量级方案如纯文本或简单标记语言表示法;反之则倾向于富媒体形式表达方式。 - **兼容性问题**: 不同设备间可能存在显示差异情况,在设计初期就要充分评估目标受众群体所使用的硬件环境及其软件版本号范围等信息[^4]。 - **扩展性规划**: 随着未来可能增加的新功能模块数量增多,当前选定的技术栈是否具备良好的可延展空间变得尤为重要[^5]。 #### 示例代码:如何快速生成一份基于 JSON 数据源驱动的 PDF 文档? 下面展示了一段利用第三方库 `pdfmake` 实现上述目的的小例子: ```javascript const pdfMake = require('pdfmake/build/pdfmake'); const fonts = { Roboto: { normal: 'fonts/Roboto-Regular.ttf', bold: 'fonts/Roboto-Medium.ttf' } }; let printer = new pdfMake(fonts); function createPdf(data){ let docDefinition = { content : [] }; data.forEach(item => { docDefinition.content.push({ text:item.name , style:'header'}); docDefinition.content.push({ ul:[item.details]}); }); return printer.createPdfKitDocument(docDefinition); } ```
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值