SpreadJS全屏方案

在一些填报场景中，需要录入很多数据，此时想要让SpreadJS控件占满整个屏幕，该怎么设置呢？下文将分为两种情况，第一种是静态设置，即SpreadJS宽高不再发生变化，一直占满整个屏幕，第二种是需要动态设置，允许用户设置全屏，也可以允许用户退出全屏。


一、静态设置

1.     <div id="gc-designer-container"></div>

复制代码

1. var canvas = document.getElementById("gc-designer-container");
   
2.             canvas.style.height = window.screen.height + 'px';

复制代码

如上代码，设置dom元素的高度即可。
二、动态设置

先设置html元素，如下代码所示：

1. <div id="wrap">
   
2.     <div>
   
3.         <a href='javascript:void(0)' onclick="FullScreen()">展开/收起</a>
   
4.     </div>
   
5.     <div id="ss" style="height: 800px;width: 80%"></div>
   
6. </div>

复制代码

上述代码，创建一个a链接与SpreadJS的dom容器 以及id为wrap的父级dom
点击a链接，调用FullScreen（）方法

1. function FullScreen() {
   
2.         if (document.fullscreenElement) {
   
3.             exitFullscreen();
   
4.         } else {
   
5.             requestFullscreen(document.getElementById("wrap"))
   
6.         }
   
7. 
   
8.         setTimeout(() => {
   
9.             const canvas = document.getElementById('ss');
   
10.             if (document.fullscreenElement) {
    
11.                 canvas.style.height = window.screen.height + 'px';
    
12.                 canvas.style.width = window.screen.width + 'px';
    
13.             } else {
    
14.                 canvas.style.height = '800px';
    
15.                 canvas.style.width = '80%';
    
16.             }
    
17.         }, 100)
    
18.     }

复制代码

上述代码逻辑是判断当前document是否处于全屏状态，如果是，则退出全屏，如果不是，则调用全屏

1. function requestFullscreen(element) {
   
2.         const fullScreen = element.requestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen || element.webkitRequestFullscreen;
   
3. 
   
4.         if (fullScreen) {
   
5.             fullScreen.call(element);
   
6.         }
   
7.     }
   
8. 
   
9.     function exitFullscreen() {
   
10.         const exit = document.exitFullscreen || document.msExitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
    
11. 
    
12.         if (exit) {
    
13.             exit.call(document);
    
14.         }
    
15.     };

复制代码

最终效果如下