找回密码
 立即注册

QQ登录

只需一步,快速开始

Derrick.Jiao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2022-1-20 11:29  /   查看:3005  /  回复:2
本帖最后由 AlexZ 于 2022-1-21 08:58 编辑

看到这个标题这么长,就知道此次的增强不简单了~我们将会对页眉页脚做了一次“史诗级”的增强。我们先来看下在v15中带来了哪些变化。
首先是下面这些页面页脚的api,我们已经将其标记为过时。但是也不用担心,这些api也还是可以正常使用的。
image.png130366210.png

取而代之的是以下的api,因此在V15中,我们更加推荐使用pageHeaderFooter去设置我们的页眉页脚。
image.png719326781.png

那怎么用呢?下面就是我们的这个api的所有option。normal是配置所有页的页眉页脚,first是配置首页的页眉页脚,odd是配置奇数页的页眉页脚,even是配置偶数页的页眉页脚。将我们需要设置内容封装成一个对象传入pageHeaderFooter中,例如,我们想要所有的页面都显示同一个页眉页脚,那么我们只需要传normal这个对象。
  1. pageHeaderFooter({
  2.     normal: {
  3.         header: {
  4.             left: '',
  5.             center: '',
  6.             right: '',
  7.             leftImage: '',
  8.             centerImage: '',
  9.             rightImage: '',
  10.         },
  11.         footer: {
  12.             left: '',
  13.             center: '',
  14.             right: '',
  15.             leftImage: '',
  16.             centerImage: '',
  17.             rightImage: '',
  18.         }
  19.     },
  20.     first: {
  21.         header: {
  22.             left: '',
  23.             center: '',
  24.             right: '',
  25.             leftImage: '',
  26.             centerImage: '',
  27.             rightImage: '',
  28.         },
  29.         footer: {
  30.             left: '',
  31.             center: '',
  32.             right: '',
  33.             leftImage: '',
  34.             centerImage: '',
  35.             rightImage: '',
  36.         }
  37.     },
  38.     odd: {
  39.         header: {
  40.             left: '',
  41.             center: '',
  42.             right: '',
  43.             leftImage: '',
  44.             centerImage: '',
  45.             rightImage: '',
  46.         },
  47.         footer: {
  48.             left: '',
  49.             center: '',
  50.             right: '',
  51.             leftImage: '',
  52.             centerImage: '',
  53.             rightImage: '',
  54.         }
  55.     },
  56.     even: {
  57.         header: {
  58.             left: '',
  59.             center: '',
  60.             right: '',
  61.             leftImage: '',
  62.             centerImage: '',
  63.             rightImage: '',
  64.         },
  65.         footer: {
  66.             left: '',
  67.             center: '',
  68.             right: '',
  69.             leftImage: '',
  70.             centerImage: '',
  71.             rightImage: '',
  72.         }
  73.     },
  74. })
复制代码

讲完了API的更新,那么我们来看下,如何通过我们设计器去设置我们的页眉页脚。(我们的设计器上,也针对打印新增了一个ribbon和打印按钮)1、如何自定义首页的页眉页脚
在页面布局中,可以看到打印标题
image.png689446715.png
然后勾选首页不同
image.png795099487.png
再接着选择自定制页眉或者自定制页脚即可,将需要的内容进行自定制
image.png784766845.png

2、如何自定义奇偶页的页眉页脚

与上面也是类似的,我们需要勾选奇偶页不同
image.png567207335.png
然后就可以进行奇偶页的配置了。
image.png900329284.png
另外,我们也提供了一些快速填充的选项供大家直接选择
image.png650986327.png

怎么样?是否心动了呢?是否感到非常强大?快快升级v15来体验吧~更多新的设计器UI等你来解锁~

2 个回复

倒序浏览
初一呀
初级会员   /  发表于:2022-10-15 10:12:08
沙发
您好,请问下13.2.3版本是否支持pageHeaderFooter这个呢,如果不支持应该使用什么来给打印的表单设置相同的表头和表尾呢
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-10-17 14:20:33
板凳
旧版本不支持pageHeaderFooter,pageHeaderFooter是V15版本的新特性。建议升级使用新版本以获得更好的用户体验。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部