一键显示打印界面

收藏

本帖最后由 Joestar.Xu 于 2024-4-29 13:54 编辑

在设计器中（V17.0.8），如果我们要显示打印界面，需要先点击“文件”按钮，再点击“打印”选项卡才能看到打印的效果，但是这样有些麻烦，而且会显示左侧的选项列表，如果仅仅只是想要显示打印的预览效果，要怎么实现呢？

image.png604459228.png

实际上，在设计器中并没有相关的接口可以直接实现，但是我们可以通过DOM操作来实现这样的需求，在附件的Demo中有两个按钮，Modify按钮将直接显示打印界面，且不会显示左侧的选项卡。

image.png46103819.png

Modify2按钮则会返回到设计器的编辑界面。

具体实现的代码因为高度依赖于DOM结构，所以在将来的版本中不排除可能出现变动的可能，请各位同学结合实际情况判断，本文仅提供一个简单的实现思路：

const styleElement = document.createElement("style");
document.querySelector("#button1").addEventListener("click", function () {
styleElement.textContent = `
.gc-file-menu-category.gc-container {
display: none !important;
}
.category-content-container.gc-flex-component.flex-stretch {
display: none !important;
left: 0 !important;
}
`;
document.head.appendChild(styleElement);
document.querySelector(".fileButton").click();
setTimeout(() => {
styleElement.textContent = `
.gc-file-menu-category.gc-container {
display: none !important;
}
.category-content-container.gc-flex-component.flex-stretch {
left: 0 !important;
}
`;
document
.querySelector(
"div.gc-flex-component.flex-default > div > div:nth-child(8) > div > div > div"
)
.click();
}, 100);
});
document.querySelector("#button2").addEventListener("click", function () {
document.querySelector(".gc-image-button").click();
document.head.removeChild(styleElement);
});

复制代码

具体Demo请参考附件。

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

一键显示打印界面

0 个回复

SpreadJS 认证

SpreadJS 高级认证