如何实现自定义打印并复用在线表格编辑器的打印预览界面

收藏

本帖最后由 Richard.Huang 于 2023-9-7 13:33 编辑

背景：
用户希望自定义”打印“按键，在用户点击打印时能够弹出我们的在线表格编辑器的打印预览窗口，并且该窗口的其他相关设置都没有只留下打印按钮，怎么实现该功能呢？
自定义打印按钮.gif814405212.png

思路：
实际上我们的点击”文件”按钮后弹出的内容界面是一个template（模板）
716b47cd50cfa48e1788151096831a8-1693992708072-4.png311308287.png

这个模板我们在Designer中可以进行自定义，我们可以通过以下代码将这个template拿到

var DesignerNS = GC.Spread.Sheets.Designer;
var fileMenuTemplateName = DesignerNS.TemplateNames.FileMenuPanelTemplate;
var template = DesignerNS.getTemplate(fileMenuTemplateName);

复制代码

咱们把这个template打印出来看一下，我们发现这个template中有一个children的属性，这里面存放的就是文件按钮打印界面的一些信息
7aecdf333b39032207302176e1720ca.png235535582.png

再往深入去看，咱们可以发现我们的文件按钮的弹窗分为左右两个部分，右边部分是根据左边的内容进行不同的展示，这两个部分的内容在template中也存放在了不同的children元素中进行存放的，我们可以通过以下的代码拿到

var leftList = template.content[0].children[0].children[0].children[0].children;// 8个
var rightList = template.content[0].children[0].children[1].children;// 6个

复制代码

我们将上述两个list打印出来
62f6c5a948416cf2171bfbc03a18946.png363938292.png

leftlist中存放着8个对象，主要有三类，一类是Container类型的按钮，它的点击后的效果是不展示右侧内容部分的，而是直接执行既定逻辑，比如后退按钮，第二类是List类型的按钮，他的点击效果是，会根据你左侧按钮不同动态地渲染右侧的界面内容的，比如新建按钮，他的右侧对应的渲染内容就是一个空白工作簿的新建，最后一类是LabelLine类型，他没有任何点击效果，仅仅做展示使用。如果大家想要新增一些按钮选项，可以根据上述不同的类型进行添加。我们将leftList打印出来的内容从上往下分别为：
1. 后退按钮
2. 新建按钮
3. 分割线
4. 打开保存按钮
5. 分割线
6. 导入导出按钮
7. 分割线
8. 打印按钮

rightlist是和左侧相对应的子页面，分别为
1. 新建按钮的子页面
2. 导入按钮的子页面
3. 导出按钮的子页面
4. 打印按钮的子页面
5. 打开按钮的子页面
6. 保存按钮的子页面

我们发现rightlist和leftlist是顺序是不同的，我怎么知道左侧某个按钮点击之后右侧区域应该显示哪个页面呢？我们可以看到，rightlist打印信息中有一个visibleWhen属性，这个属性是和leftList中的元素的value相对应的，比如新建按钮
384bf4d048139e9134928e4811e0605.png222997435.png

384bf4d048139e9134928e4811e0605.png222997435.png

解决方案：
了解了以上信息，我们就可以通过修改template中的结构来实现删除文件按钮弹出窗口的其他选项

leftList.splice(1, 6);
rightList.splice(0, 3);
DesignerNS.registerTemplate(fileMenuTemplateName, template);// 重新设置模板

复制代码

修改了template后，我们只要将设计器的工具栏隐藏，并在我们自定义的打印按钮中设置弹出模板逻辑即可

// 隐藏整个工具栏
document.querySelector('div.ribbon').style.display = 'none'
// 自定义打印按钮逻辑
_getElementById('click').addEventListener('click', async function () {
// 点击文件
document.querySelector(".fileButton").click();
// 等待一段时间，让新的元素加载完成
await new Promise(resolve => setTimeout(resolve, 0));// 可根据实际情况调整等待时间
// 再点击打印
document.querySelectorAll(".file-menu-category-list")[0].children[0].children[0].children[0].click();
})

复制代码

如此一来就实现了用户希望自定义打印按钮并且复用我们在线表格编辑器的打印弹窗的想法了

详情代码可以参考附件Demo：

		自动登录	找回密码
密码			立即注册

如何实现自定义打印并复用在线表格编辑器的打印预览界面

0 个回复

SpreadJS 认证

SpreadJS 高级认证