# 表单设计器打印效果调整解决方案 [TOC] ## 前言 有时候我们使用表单设计器的打印功能时,打印的效果总是不尽人意,要么是样式错乱,要么是表单错位,要么是表格出现滚动条或隐藏等等情况。本篇文章将会带领你掌握如何正确打印出良好效果表单。 ## 调整方案 ### 表单属性调整 建议表单属性里的弹窗宽度设置为`800px`(A4纸,其他类型的纸张自行调整),因为屏幕的大小(假设分辨率为1920px×1080px)远大于A4纸的大小,如果你的表单宽度过宽,那么即使电脑上看着没问题,但是实际打印出来就会错位,所以最好限制一下表单的宽度来减少错位率。 ![](https://img.kancloud.cn/02/8f/028f621d313412cce04deb99ff0eda60_187x147.png) ### 字段属性调整 1. 字体尽量不要太大,12px即可 ![](https://img.kancloud.cn/6e/2a/6e2acdedd3f2ad93ef00de27d6b327c2_188x79.png) 2. 如果有多个栅格列,那么列配置项的总计不要超过24 ![](https://img.kancloud.cn/02/98/02983ede808c8c7ac251f8c71e371d8f_220x395.png) ### 子表属性调整 打印时子表不需要那么多的按钮,可以在属性里设置,最好也设置默认的行数。 ![](https://img.kancloud.cn/b4/be/b4bec8b3b9647e3a231b1d247bf3ccc0_1152x511.png) 子表内的组件宽度最好设置为`auto`,以防止出现滚动条。![](https://img.kancloud.cn/8e/42/8e42f5d47a9890c366d6cd1f9d4efc73_105x74.png) ### Chrome打印窗口调整 善用更多设置里的各个选项,尤其是边距和缩放功能 ![](https://img.kancloud.cn/a7/6d/a76ddc34ffe705fba9f6f7da20c400d1_391x852.png) ### 常见问题 1. 打印预览的时候发现word风格的线条有的消失了 ![](https://img.kancloud.cn/9a/83/9a837e357ce40a13345dd0330f7dbfd1_643x235.png) 这个问题是Chrome预览的问题,实际上是有的,可以点击适合页面大小按钮看看 ![](https://img.kancloud.cn/23/48/234856601d5af250b13fbe7f25808b8c_827x400.png) 预览也有不对的情况,请以实际打印效果为准。 2. 分割线的横杠消失了 ![](https://img.kancloud.cn/3d/fc/3dfc4cc4b2ff3173c666a02cf7659dbc_831x74.png) ![](https://img.kancloud.cn/71/79/7179734e3d5272c4981f9919d44e71f6_1193x172.png) 这里需要勾上背景图形才能显示出分割线的横杠 ## 实战案例 改造下面这个表单中出现的问题 ![](https://img.kancloud.cn/3e/20/3e203e37171ef28777ec26e70c7fa037_603x843.png) ### 粗调步骤 1. 弹窗宽度设置为`800px` 2. 字体大小设置为12px 3. 去掉子表多余按钮 4. 子表默认4行 5. 子表内组件宽度设为`auto` 粗调完毕后效果如下,但还是有点小问题,比如子表最后一个列没有居中,多行的时候跨列了,那么接下来就需要细调一波了。 ![](https://img.kancloud.cn/0b/f5/0bf5df7dfe66e3531966efda8ae74db4_759x848.png) ![](https://img.kancloud.cn/36/28/3628ba1fca9c110f09f5a56cbdc92893_827x432.png) ### 细调步骤 1. Chrome打印窗口设置缩放。这个要**根据不同的电脑做出不同的调整**,我这里调整到96时就正常了 ![](https://img.kancloud.cn/c5/2c/c52c6e72316d46177aa8bf87981ba5d5_636x442.png) 2. 添加占位符 添加方法: * 新增两个文本组件 ![](https://img.kancloud.cn/1a/17/1a17021ea41225d22b01283def360fcd_83x30.png) * 第一个文本组件设置如下属性 ![](https://img.kancloud.cn/0a/73/0a73aefab9464e78287ad9099ff2573a_263x473.png) * 第二个文本组件在第一个下面,且除了行高之外其他的属性都最好保持一致 ![](https://img.kancloud.cn/a1/c6/a1c6d9c0cfab6ca3f4e30feb93d51663_77x78.png) ### 最终效果 ![](https://img.kancloud.cn/06/5b/065b34844a57da9325f7c8168264250c_733x1024.png) ![](https://img.kancloud.cn/34/44/3444886ec277e0aadf7cb4a1f806fa79_724x1031.png) ![](https://img.kancloud.cn/60/85/6085888b549051d27d236da38416b6c1_729x1021.png)