前端最简易实现特定区域全屏展示

一、前言

在日常开发项目中，通常会遇到大屏展示的表格，或是想要将某一表格或内容全部展示；类似于快捷键F11的功能。遇到这种需求通常是要想办法使用插件来全屏展示，还需要改特定结构来实现；

下面介绍一种简易方式，直接获取需要全屏展示的文档标签元素，直接全屏展示；

二、实现方式

2.1 常用的全屏方式

使用浏览器全屏API：document.requestFullscreen()注意不同浏览器的兼容情况
使用第三方插件：screenfull等
使用全屏组件：Vue-Fullscreen

2.2 简易实现全屏

给需要全屏展示的元素标签设置唯一可以获取的id名；
设置按钮或者给自身增加点击事件（这个可以根据业务需求去实现）；
调用下放全屏方法即可；

代码示例：

<style>/* 需要设置宽高，这样全屏可以撑起来 */#fullScreen {width: 100%;height: 100%;background-color: pink;}
</style>
<div>头部内容</div>
<div id="fullScreen" onclick="showFullscreen(this)">我是需要全部展示的</div>

三、核心代码

/** @Description: 全屏* @version: 0.1.0* @Author: 懒羊羊我小弟* @Copyright: Copyright (c) */
export function IEVersion() {const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串// 判断是否IE<11浏览器const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;return isIE || isIE11;
}// 全屏
export function showFullscreen(ele) {if (ele.requestFullscreen) {ele.requestFullscreen();} else if (ele.mozRequestFullScreen) {ele.mozRequestFullScreen();} else if (ele.msRequestFullscreen) {ele.msRequestFullscreen();} else if (ele.webkitRequestFullscreen) {ele.webkitRequestFullScreen();}
}// 退出全屏
export function hideFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}
}export const fullScreenEnabled =document.fullScreenEnabled ||document.webkitFullScreenEnabled ||document.mozFullScreenEnabled ||document.msFullScreenEnabled;