一键显示打印界面

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




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




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

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

1. const styleElement = document.createElement("style");
   
2. document.querySelector("#button1").addEventListener("click", function () {
   
3.   styleElement.textContent = `
   
4.       .gc-file-menu-category.gc-container {
   
5.         display: none !important;
   
6.       }
   
7.       .category-content-container.gc-flex-component.flex-stretch {
   
8.         display: none !important;
   
9.         left: 0 !important;
   
10.       }
    
11.     `;
    
12.   document.head.appendChild(styleElement);
    
13. 
    
14.   document.querySelector(".fileButton").click();
    
15. 
    
16.   setTimeout(() => {
    
17.     styleElement.textContent = `
    
18.         .gc-file-menu-category.gc-container {
    
19.           display: none !important;
    
20.         }
    
21.         .category-content-container.gc-flex-component.flex-stretch {
    
22.           left: 0 !important;
    
23.         }
    
24.       `;
    
25. 
    
26.     document
    
27.       .querySelector(
    
28.         "div.gc-flex-component.flex-default > div > div:nth-child(8) > div > div > div"
    
29.       )
    
30.       .click();
    
31.   }, 100);
    
32. });
    
33. 
    
34. document.querySelector("#button2").addEventListener("click", function () {
    
35.   document.querySelector(".gc-image-button").click();
    
36. 
    
37.   document.head.removeChild(styleElement);
    
38. });

复制代码

具体Demo请参考附件。