SpreadJS全屏方案
在一些填报场景中，需要录入很多数据，此时想要让SpreadJS控件占满整个屏幕，该怎么设置呢？下文将分为两种情况，第一种是静态设置，即SpreadJS宽高不再发生变化，一直占满整个屏幕，第二种是需要动态设置，允许用户设置全屏，也可以允许用户退出全屏。一、静态设置
<div id="gc-designer-container"></div> var canvas = document.getElementById("gc-designer-container");
canvas.style.height = window.screen.height + 'px';如上代码，设置dom元素的高度即可。
二、动态设置
先设置html元素，如下代码所示：
<div id="wrap">
<div>
<a href='javascript:void(0)' onclick="FullScreen()">展开/收起</a>
</div>
<div id="ss" style="height: 800px;width: 80%"></div>
</div>上述代码，创建一个a链接与SpreadJS的dom容器 以及id为wrap的父级dom
点击a链接，调用FullScreen（）方法
function FullScreen() {
if (document.fullscreenElement) {
exitFullscreen();
} else {
requestFullscreen(document.getElementById("wrap"))
}
setTimeout(() => {
const canvas = document.getElementById('ss');
if (document.fullscreenElement) {
canvas.style.height = window.screen.height + 'px';
canvas.style.width = window.screen.width + 'px';
} else {
canvas.style.height = '800px';
canvas.style.width = '80%';
}
}, 100)
}上述代码逻辑是判断当前document是否处于全屏状态，如果是，则退出全屏，如果不是，则调用全屏
function requestFullscreen(element) {
const fullScreen = element.requestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen || element.webkitRequestFullscreen;
if (fullScreen) {
fullScreen.call(element);
}
}
function exitFullscreen() {
const exit = document.exitFullscreen || document.msExitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
if (exit) {
exit.call(document);
}
};最终效果如下
页:
[1]