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

一、前言

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

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

二、实现方式

2.1 常用的全屏方式

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

2.2 简易实现全屏

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

代码示例：

<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;