低代码实现自定义打印功能

最近新做的项目,客户需要大量的标签打印功能,前端工作量有点大,我简单看了几个低代码开发平台,发现都有自定义打印的功能,而且很快就能做出来了,但都要收费,唯独白码平台是可以免费使用的。

目标:

实现打包箱箱码的打印,打印标签格式如下图所示,尺寸为80*60mm
低代码实现自定义打印功能_第1张图片

开发环境:

白码低代码开发平台

前期准备:

准备产品数据表,其中包括产品料号的属性;
低代码实现自定义打印功能_第2张图片

实现步骤:

创建一个打印页类型的自定义页面,命名为“箱号”;
低代码实现自定义打印功能_第3张图片

①进入页面,点击页面设置,选择纸张大小为“内部箱号80mm*60mm”;
低代码实现自定义打印功能_第4张图片

②根据打印格式,排版出页面,可以先把内容写死;
低代码实现自定义打印功能_第5张图片

③根据不同的产品,会打印出不同的内容,这些数据都需要作为路由属性添加到页面属性,分别是:产品料号、客户料号、数量和打包日期;
低代码实现自定义打印功能_第6张图片

④再把这些属性对接到对应图层;
低代码实现自定义打印功能_第7张图片
低代码实现自定义打印功能_第8张图片

全部要对接好后,保存页面;
⑤回到功能流程,新建一个功能,命名为“打印产品箱号”;
低代码实现自定义打印功能_第9张图片

⑥编辑功能,第一步使用选择数据的步骤,选择产品,即选择需要打印箱号的产品;
低代码实现自定义打印功能_第10张图片

⑦第二步使用交互输入的步骤,让用户本次打印箱号的客户料号、数量和打包日期;
低代码实现自定义打印功能_第11张图片
低代码实现自定义打印功能_第12张图片

⑧第三步则使用打印的步骤,操作选择“自定义页面”,模板选择“箱号”(前面做好的打印页);
低代码实现自定义打印功能_第13张图片

打开步骤设置,添加属性,并根据打印页路由属性的名称对应上第一步和第二步的属性,例如:路由属性的产品料号,对应第一步选择产品的产品料号;
低代码实现自定义打印功能_第14张图片

⑨至此功能就做好了,测试结果:

你可能感兴趣的:(无代码,低代码,无代码/低代码,javascript,vue,excel,java,node.js)