打印页面设计

1、如果是单页打印，可以给打印的页面，添加大小设置：
菜单-->页面-->页面配置-->页面背景层样式-->布局-->大小

image.png

2、背景图配置：背景图是给顶层控件的，如果背景图大小超出了1中设置的大小，那么可以在控件样式中给背景图进行配置：
菜单-->页面-->页面配置-->控件样式-->布局-->背景重复/背景图位置/背景图大小

image.png

3、顶层控件可设置宽度占满：
菜单-->页面-->页面配置-->控件样式-->布局-->宽度占满
菜单-->页面-->页面配置-->填充属性-->自适应宽度

4、页边距控制，可通过打印按钮+页面背景层样式/页面控件样式控制：

image.png

image.png

5、自动分页，用于页面内容较长在一页中无法完全显示的情况下。
a、浏览器本身也会给打印的内容进行分页。如果显示头和尾，会带上打印时间和打印网址。如果不带头和尾，会导致上下无页边距，显示效果不好
b、自动分页可按照内容分块式自动拆分。并将需要按照右->左->右的方式顺序排放
c、自动分页拆分的对象：页面顶层控件或者样式配置有"控件内自动分页"

image.png

d、自动分页支持控件类型：div容器或者网格布局容器
e、每个拆分的容器，其内部的子应该是一个比较小的不能超过一页的子块，否则这块无法在一页中显示，其内部应该再次拆分
f、如果页面内容较少，可在一页中展示，那么就不应该设置为自动分页

6、推荐方式：在设计的页面中，打印按钮旁边，放一个链接按钮，这两个按钮，指向同一个页面，链接按钮用于查看打印的页面。重点设置（以A4纸大小为例）：
a、链接使用弹出新窗口的方式，并把大小设置为纸张的大小。
A4纸张大小：794,1123。
如果被打印页面中有纵向滚动条，则设置为：810,1123
b、打印按钮设置页边距：
纵向："top"/"bottom"为2.54 "left"/"right"为3.18
横向："top"/"bottom"为3.18 "left"/"right"为2.54
c、在被打印页面中，设置背景层样式为纵向打印预览

image.png

d、这样得到的链接弹窗页面效果和打印出来的效果，完全一样