修复前端xlsx解析 打印问题 和其他问题

server/src/main/resources/static/xlsx/assets/iconfont2/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

server/src/main/resources/static/xlsx/assets/iconfont2/demo_index.html

@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3636363" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe740;</span>
+                <div class="name">导出</div>
+                <div class="code-name">&amp;#xe740;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe741;</span>
+                <div class="name">导入</div>
+                <div class="code-name">&amp;#xe741;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe664;</span>
+                <div class="name">数据统计</div>
+                <div class="code-name">&amp;#xe664;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe677;</span>
+                <div class="name">常规数据统计</div>
+                <div class="code-name">&amp;#xe677;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec83;</span>
+                <div class="name">字体上标</div>
+                <div class="code-name">&amp;#xec83;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec85;</span>
+                <div class="name">字体下标</div>
+                <div class="code-name">&amp;#xec85;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe782;</span>
+                <div class="name">刷新</div>
+                <div class="code-name">&amp;#xe782;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6b1;</span>
+                <div class="name">refresh</div>
+                <div class="code-name">&amp;#xe6b1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">图层筛选</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63c;</span>
+                <div class="name">图层</div>
+                <div class="code-name">&amp;#xe63c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">图层</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe894;</span>
+                <div class="name">大数据、数据统计-02</div>
+                <div class="code-name">&amp;#xe894;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63b;</span>
+                <div class="name">保存</div>
+                <div class="code-name">&amp;#xe63b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb47;</span>
+                <div class="name">保存_o</div>
+                <div class="code-name">&amp;#xeb47;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8b6;</span>
+                <div class="name">删除</div>
+                <div class="code-name">&amp;#xe8b6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8b9;</span>
+                <div class="name">搜索</div>
+                <div class="code-name">&amp;#xe8b9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8bf;</span>
+                <div class="name">眼睛</div>
+                <div class="code-name">&amp;#xe8bf;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62b;</span>
+                <div class="name">导出-02</div>
+                <div class="code-name">&amp;#xe62b;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1684982520381') format('woff2'),
+       url('iconfont.woff?t=1684982520381') format('woff'),
+       url('iconfont.ttf?t=1684982520381') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daochu1"></span>
+            <div class="name">
+              导出
+            </div>
+            <div class="code-name">.icon-daochu1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daoru2"></span>
+            <div class="name">
+              导入
+            </div>
+            <div class="code-name">.icon-daoru2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shujutongji"></span>
+            <div class="name">
+              数据统计
+            </div>
+            <div class="code-name">.icon-shujutongji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-changguishujutongji"></span>
+            <div class="name">
+              常规数据统计
+            </div>
+            <div class="code-name">.icon-changguishujutongji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zitishangbiao"></span>
+            <div class="name">
+              字体上标
+            </div>
+            <div class="code-name">.icon-zitishangbiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zitixiabiao"></span>
+            <div class="name">
+              字体下标
+            </div>
+            <div class="code-name">.icon-zitixiabiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shuaxin"></span>
+            <div class="name">
+              刷新
+            </div>
+            <div class="code-name">.icon-shuaxin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-refresh"></span>
+            <div class="name">
+              refresh
+            </div>
+            <div class="code-name">.icon-refresh
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tucengshaixuan"></span>
+            <div class="name">
+              图层筛选
+            </div>
+            <div class="code-name">.icon-tucengshaixuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tuceng1"></span>
+            <div class="name">
+              图层
+            </div>
+            <div class="code-name">.icon-tuceng1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-layer"></span>
+            <div class="name">
+              图层
+            </div>
+            <div class="code-name">.icon-layer
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-dashujushujutongji-02"></span>
+            <div class="name">
+              大数据、数据统计-02
+            </div>
+            <div class="code-name">.icon-a-dashujushujutongji-02
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-baocun"></span>
+            <div class="name">
+              保存
+            </div>
+            <div class="code-name">.icon-baocun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-baocun_o"></span>
+            <div class="name">
+              保存_o
+            </div>
+            <div class="code-name">.icon-baocun_o
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shanchu"></span>
+            <div class="name">
+              删除
+            </div>
+            <div class="code-name">.icon-shanchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sousuo"></span>
+            <div class="name">
+              搜索
+            </div>
+            <div class="code-name">.icon-sousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yanjing"></span>
+            <div class="name">
+              眼睛
+            </div>
+            <div class="code-name">.icon-yanjing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daochuxlsx"></span>
+            <div class="name">
+              导出-02
+            </div>
+            <div class="code-name">.icon-daochuxlsx
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daochu1"></use>
+                </svg>
+                <div class="name">导出</div>
+                <div class="code-name">#icon-daochu1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daoru2"></use>
+                </svg>
+                <div class="name">导入</div>
+                <div class="code-name">#icon-daoru2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shujutongji"></use>
+                </svg>
+                <div class="name">数据统计</div>
+                <div class="code-name">#icon-shujutongji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-changguishujutongji"></use>
+                </svg>
+                <div class="name">常规数据统计</div>
+                <div class="code-name">#icon-changguishujutongji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zitishangbiao"></use>
+                </svg>
+                <div class="name">字体上标</div>
+                <div class="code-name">#icon-zitishangbiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zitixiabiao"></use>
+                </svg>
+                <div class="name">字体下标</div>
+                <div class="code-name">#icon-zitixiabiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shuaxin"></use>
+                </svg>
+                <div class="name">刷新</div>
+                <div class="code-name">#icon-shuaxin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-refresh"></use>
+                </svg>
+                <div class="name">refresh</div>
+                <div class="code-name">#icon-refresh</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tucengshaixuan"></use>
+                </svg>
+                <div class="name">图层筛选</div>
+                <div class="code-name">#icon-tucengshaixuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tuceng1"></use>
+                </svg>
+                <div class="name">图层</div>
+                <div class="code-name">#icon-tuceng1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-layer"></use>
+                </svg>
+                <div class="name">图层</div>
+                <div class="code-name">#icon-layer</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-dashujushujutongji-02"></use>
+                </svg>
+                <div class="name">大数据、数据统计-02</div>
+                <div class="code-name">#icon-a-dashujushujutongji-02</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-baocun"></use>
+                </svg>
+                <div class="name">保存</div>
+                <div class="code-name">#icon-baocun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-baocun_o"></use>
+                </svg>
+                <div class="name">保存_o</div>
+                <div class="code-name">#icon-baocun_o</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shanchu"></use>
+                </svg>
+                <div class="name">删除</div>
+                <div class="code-name">#icon-shanchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sousuo"></use>
+                </svg>
+                <div class="name">搜索</div>
+                <div class="code-name">#icon-sousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yanjing"></use>
+                </svg>
+                <div class="name">眼睛</div>
+                <div class="code-name">#icon-yanjing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daochuxlsx"></use>
+                </svg>
+                <div class="name">导出-02</div>
+                <div class="code-name">#icon-daochuxlsx</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

server/src/main/resources/static/xlsx/assets/iconfont2/iconfont.css

@@ -0,0 +1,87 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3636363 */
+  src: url('iconfont.woff2?t=1684982520381') format('woff2'),
+       url('iconfont.woff?t=1684982520381') format('woff'),
+       url('iconfont.ttf?t=1684982520381') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-daochu1:before {
+  content: "\e740";
+}
+
+.icon-daoru2:before {
+  content: "\e741";
+}
+
+.icon-shujutongji:before {
+  content: "\e664";
+}
+
+.icon-changguishujutongji:before {
+  content: "\e677";
+}
+
+.icon-zitishangbiao:before {
+  content: "\ec83";
+}
+
+.icon-zitixiabiao:before {
+  content: "\ec85";
+}
+
+.icon-shuaxin:before {
+  content: "\e782";
+}
+
+.icon-refresh:before {
+  content: "\e6b1";
+}
+
+.icon-tucengshaixuan:before {
+  content: "\e606";
+}
+
+.icon-tuceng1:before {
+  content: "\e63c";
+}
+
+.icon-layer:before {
+  content: "\e613";
+}
+
+.icon-a-dashujushujutongji-02:before {
+  content: "\e894";
+}
+
+.icon-baocun:before {
+  content: "\e63b";
+}
+
+.icon-baocun_o:before {
+  content: "\eb47";
+}
+
+.icon-shanchu:before {
+  content: "\e8b6";
+}
+
+.icon-sousuo:before {
+  content: "\e8b9";
+}
+
+.icon-yanjing:before {
+  content: "\e8bf";
+}
+
+.icon-daochuxlsx:before {
+  content: "\e62b";
+}
+

server/src/main/resources/static/xlsx/assets/iconfont2/iconfont.json

@@ -0,0 +1,135 @@
+{
+  "id": "3636363",
+  "name": "luckysheet",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "32414822",
+      "name": "导出",
+      "font_class": "daochu1",
+      "unicode": "e740",
+      "unicode_decimal": 59200
+    },
+    {
+      "icon_id": "32414824",
+      "name": "导入",
+      "font_class": "daoru2",
+      "unicode": "e741",
+      "unicode_decimal": 59201
+    },
+    {
+      "icon_id": "6554314",
+      "name": "数据统计",
+      "font_class": "shujutongji",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "8213846",
+      "name": "常规数据统计",
+      "font_class": "changguishujutongji",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "6337468",
+      "name": "字体上标",
+      "font_class": "zitishangbiao",
+      "unicode": "ec83",
+      "unicode_decimal": 60547
+    },
+    {
+      "icon_id": "6337475",
+      "name": "字体下标",
+      "font_class": "zitixiabiao",
+      "unicode": "ec85",
+      "unicode_decimal": 60549
+    },
+    {
+      "icon_id": "579551",
+      "name": "刷新",
+      "font_class": "shuaxin",
+      "unicode": "e782",
+      "unicode_decimal": 59266
+    },
+    {
+      "icon_id": "15066952",
+      "name": "refresh",
+      "font_class": "refresh",
+      "unicode": "e6b1",
+      "unicode_decimal": 59057
+    },
+    {
+      "icon_id": "6677531",
+      "name": "图层筛选",
+      "font_class": "tucengshaixuan",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "5650931",
+      "name": "图层",
+      "font_class": "tuceng1",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "10904998",
+      "name": "图层",
+      "font_class": "layer",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "25885527",
+      "name": "大数据、数据统计-02",
+      "font_class": "a-dashujushujutongji-02",
+      "unicode": "e894",
+      "unicode_decimal": 59540
+    },
+    {
+      "icon_id": "1305399",
+      "name": "保存",
+      "font_class": "baocun",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
+    },
+    {
+      "icon_id": "5387745",
+      "name": "保存_o",
+      "font_class": "baocun_o",
+      "unicode": "eb47",
+      "unicode_decimal": 60231
+    },
+    {
+      "icon_id": "11372693",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e8b6",
+      "unicode_decimal": 59574
+    },
+    {
+      "icon_id": "11372706",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e8b9",
+      "unicode_decimal": 59577
+    },
+    {
+      "icon_id": "11372728",
+      "name": "眼睛",
+      "font_class": "yanjing",
+      "unicode": "e8bf",
+      "unicode_decimal": 59583
+    },
+    {
+      "icon_id": "26922840",
+      "name": "导出-02",
+      "font_class": "daochuxlsx",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    }
+  ]
+}

server/src/main/resources/static/xlsx/assets/monthSelect/index.d.ts

@@ -0,0 +1,17 @@
+import { Plugin } from "../../types/options";
+export interface Config {
+    shorthand: boolean;
+    dateFormat: string;
+    altFormat: string;
+    theme: string;
+    _stubbedCurrentMonth?: number;
+}
+export interface ElementDate extends Element {
+    dateObj: Date;
+}
+export declare type MonthElement = HTMLSpanElement & {
+    dateObj: Date;
+    $i: number;
+};
+declare function monthSelectPlugin(pluginConfig?: Partial<Config>): Plugin;
+export default monthSelectPlugin;

server/src/main/resources/static/xlsx/assets/monthSelect/index.js

@@ -0,0 +1,301 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.monthSelectPlugin = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    var monthToStr = function (monthNumber, shorthand, locale) { return locale.months[shorthand ? "shorthand" : "longhand"][monthNumber]; };
+
+    function clearNode(node) {
+        while (node.firstChild)
+            node.removeChild(node.firstChild);
+    }
+    function getEventTarget(event) {
+        try {
+            if (typeof event.composedPath === "function") {
+                var path = event.composedPath();
+                return path[0];
+            }
+            return event.target;
+        }
+        catch (error) {
+            return event.target;
+        }
+    }
+
+    var defaultConfig = {
+        shorthand: false,
+        dateFormat: "F Y",
+        altFormat: "F Y",
+        theme: "light",
+    };
+    function monthSelectPlugin(pluginConfig) {
+        var config = __assign(__assign({}, defaultConfig), pluginConfig);
+        return function (fp) {
+            fp.config.dateFormat = config.dateFormat;
+            fp.config.altFormat = config.altFormat;
+            var self = { monthsContainer: null };
+            function clearUnnecessaryDOMElements() {
+                if (!fp.rContainer)
+                    return;
+                clearNode(fp.rContainer);
+                for (var index = 0; index < fp.monthElements.length; index++) {
+                    var element = fp.monthElements[index];
+                    if (!element.parentNode)
+                        continue;
+                    element.parentNode.removeChild(element);
+                }
+            }
+            function build() {
+                if (!fp.rContainer)
+                    return;
+                self.monthsContainer = fp._createElement("div", "flatpickr-monthSelect-months");
+                self.monthsContainer.tabIndex = -1;
+                buildMonths();
+                fp.rContainer.appendChild(self.monthsContainer);
+                fp.calendarContainer.classList.add("flatpickr-monthSelect-theme-" + config.theme);
+            }
+            function buildMonths() {
+                if (!self.monthsContainer)
+                    return;
+                clearNode(self.monthsContainer);
+                var frag = document.createDocumentFragment();
+                for (var i = 0; i < 12; i++) {
+                    var month = fp.createDay("flatpickr-monthSelect-month", new Date(fp.currentYear, i), 0, i);
+                    if (month.dateObj.getMonth() === new Date().getMonth() &&
+                        month.dateObj.getFullYear() === new Date().getFullYear())
+                        month.classList.add("today");
+                    month.textContent = monthToStr(i, config.shorthand, fp.l10n);
+                    month.addEventListener("click", selectMonth);
+                    frag.appendChild(month);
+                }
+                self.monthsContainer.appendChild(frag);
+                if (fp.config.minDate &&
+                    fp.currentYear === fp.config.minDate.getFullYear())
+                    fp.prevMonthNav.classList.add("flatpickr-disabled");
+                else
+                    fp.prevMonthNav.classList.remove("flatpickr-disabled");
+                if (fp.config.maxDate &&
+                    fp.currentYear === fp.config.maxDate.getFullYear())
+                    fp.nextMonthNav.classList.add("flatpickr-disabled");
+                else
+                    fp.nextMonthNav.classList.remove("flatpickr-disabled");
+            }
+            function bindEvents() {
+                fp._bind(fp.prevMonthNav, "click", function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    fp.changeYear(fp.currentYear - 1);
+                    selectYear();
+                    buildMonths();
+                });
+                fp._bind(fp.nextMonthNav, "click", function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    fp.changeYear(fp.currentYear + 1);
+                    selectYear();
+                    buildMonths();
+                });
+                fp._bind(self.monthsContainer, "mouseover", function (e) {
+                    if (fp.config.mode === "range")
+                        fp.onMouseOver(getEventTarget(e), "flatpickr-monthSelect-month");
+                });
+            }
+            function setCurrentlySelected() {
+                if (!fp.rContainer)
+                    return;
+                if (!fp.selectedDates.length)
+                    return;
+                var currentlySelected = fp.rContainer.querySelectorAll(".flatpickr-monthSelect-month.selected");
+                for (var index = 0; index < currentlySelected.length; index++) {
+                    currentlySelected[index].classList.remove("selected");
+                }
+                var targetMonth = fp.selectedDates[0].getMonth();
+                var month = fp.rContainer.querySelector(".flatpickr-monthSelect-month:nth-child(" + (targetMonth + 1) + ")");
+                if (month) {
+                    month.classList.add("selected");
+                }
+            }
+            function selectYear() {
+                var selectedDate = fp.selectedDates[0];
+                if (selectedDate) {
+                    selectedDate = new Date(selectedDate);
+                    selectedDate.setFullYear(fp.currentYear);
+                    if (fp.config.minDate && selectedDate < fp.config.minDate) {
+                        selectedDate = fp.config.minDate;
+                    }
+                    if (fp.config.maxDate && selectedDate > fp.config.maxDate) {
+                        selectedDate = fp.config.maxDate;
+                    }
+                    fp.currentYear = selectedDate.getFullYear();
+                }
+                fp.currentYearElement.value = String(fp.currentYear);
+                if (fp.rContainer) {
+                    var months = fp.rContainer.querySelectorAll(".flatpickr-monthSelect-month");
+                    months.forEach(function (month) {
+                        month.dateObj.setFullYear(fp.currentYear);
+                        if ((fp.config.minDate && month.dateObj < fp.config.minDate) ||
+                            (fp.config.maxDate && month.dateObj > fp.config.maxDate)) {
+                            month.classList.add("flatpickr-disabled");
+                        }
+                        else {
+                            month.classList.remove("flatpickr-disabled");
+                        }
+                    });
+                }
+                setCurrentlySelected();
+            }
+            function selectMonth(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                var eventTarget = getEventTarget(e);
+                if (!(eventTarget instanceof Element))
+                    return;
+                if (eventTarget.classList.contains("flatpickr-disabled"))
+                    return;
+                if (eventTarget.classList.contains("notAllowed"))
+                    return; // necessary??
+                setMonth(eventTarget.dateObj);
+                if (fp.config.closeOnSelect) {
+                    var single = fp.config.mode === "single";
+                    var range = fp.config.mode === "range" && fp.selectedDates.length === 2;
+                    if (single || range)
+                        fp.close();
+                }
+            }
+            function setMonth(date) {
+                var selectedDate = new Date(fp.currentYear, date.getMonth(), date.getDate());
+                var selectedDates = [];
+                switch (fp.config.mode) {
+                    case "single":
+                        selectedDates = [selectedDate];
+                        break;
+                    case "multiple":
+                        selectedDates.push(selectedDate);
+                        break;
+                    case "range":
+                        if (fp.selectedDates.length === 2) {
+                            selectedDates = [selectedDate];
+                        }
+                        else {
+                            selectedDates = fp.selectedDates.concat([selectedDate]);
+                            selectedDates.sort(function (a, b) { return a.getTime() - b.getTime(); });
+                        }
+                        break;
+                }
+                fp.setDate(selectedDates, true);
+                setCurrentlySelected();
+            }
+            var shifts = {
+                37: -1,
+                39: 1,
+                40: 3,
+                38: -3,
+            };
+            function onKeyDown(_, __, ___, e) {
+                var shouldMove = shifts[e.keyCode] !== undefined;
+                if (!shouldMove && e.keyCode !== 13) {
+                    return;
+                }
+                if (!fp.rContainer || !self.monthsContainer)
+                    return;
+                var currentlySelected = fp.rContainer.querySelector(".flatpickr-monthSelect-month.selected");
+                var index = Array.prototype.indexOf.call(self.monthsContainer.children, document.activeElement);
+                if (index === -1) {
+                    var target = currentlySelected || self.monthsContainer.firstElementChild;
+                    target.focus();
+                    index = target.$i;
+                }
+                if (shouldMove) {
+                    self.monthsContainer.children[(12 + index + shifts[e.keyCode]) % 12].focus();
+                }
+                else if (e.keyCode === 13 &&
+                    self.monthsContainer.contains(document.activeElement)) {
+                    setMonth(document.activeElement.dateObj);
+                }
+            }
+            function closeHook() {
+                var _a;
+                if (((_a = fp.config) === null || _a === void 0 ? void 0 : _a.mode) === "range" && fp.selectedDates.length === 1)
+                    fp.clear(false);
+                if (!fp.selectedDates.length)
+                    buildMonths();
+            }
+            // Help the prev/next year nav honor config.minDate (see 3fa5a69)
+            function stubCurrentMonth() {
+                config._stubbedCurrentMonth = fp._initialDate.getMonth();
+                fp._initialDate.setMonth(config._stubbedCurrentMonth);
+                fp.currentMonth = config._stubbedCurrentMonth;
+            }
+            function unstubCurrentMonth() {
+                if (!config._stubbedCurrentMonth)
+                    return;
+                fp._initialDate.setMonth(config._stubbedCurrentMonth);
+                fp.currentMonth = config._stubbedCurrentMonth;
+                delete config._stubbedCurrentMonth;
+            }
+            function destroyPluginInstance() {
+                if (self.monthsContainer !== null) {
+                    var months = self.monthsContainer.querySelectorAll(".flatpickr-monthSelect-month");
+                    for (var index = 0; index < months.length; index++) {
+                        months[index].removeEventListener("click", selectMonth);
+                    }
+                }
+            }
+            return {
+                onParseConfig: function () {
+                    fp.config.enableTime = false;
+                },
+                onValueUpdate: setCurrentlySelected,
+                onKeyDown: onKeyDown,
+                onReady: [
+                    stubCurrentMonth,
+                    clearUnnecessaryDOMElements,
+                    build,
+                    bindEvents,
+                    setCurrentlySelected,
+                    function () {
+                        fp.config.onClose.push(closeHook);
+                        fp.loadedPlugins.push("monthSelect");
+                    },
+                ],
+                onDestroy: [
+                    unstubCurrentMonth,
+                    destroyPluginInstance,
+                    function () {
+                        fp.config.onClose = fp.config.onClose.filter(function (hook) { return hook !== closeHook; });
+                    },
+                ],
+            };
+        };
+    }
+
+    return monthSelectPlugin;
+
+})));

server/src/main/resources/static/xlsx/assets/monthSelect/style.css

@@ -0,0 +1,117 @@
+.flatpickr-monthSelect-months {
+  margin: 10px 1px 3px 1px;
+  flex-wrap: wrap;
+}
+
+.flatpickr-monthSelect-month {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #393939;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0.5px;
+  justify-content: center;
+  padding: 10px;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  text-align: center;
+  width: 33%;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled {
+	color: #eee;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled:hover,
+.flatpickr-monthSelect-month.flatpickr-disabled:focus {
+	cursor: not-allowed;
+	background: none !important;
+}
+
+.flatpickr-monthSelect-theme-dark {
+  background: #3f4458;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
+  color: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
+  color: #fff;
+  fill: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.flatpickr-monthSelect-month.today {
+  border-color: #959ea9;
+}
+
+.flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-month.inRange.today,
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
+  background: #e6e6e6;
+  cursor: pointer;
+  outline: 0;
+  border-color: #e6e6e6;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
+  background: #646c8c;
+  border-color: #646c8c;
+}
+
+.flatpickr-monthSelect-month.today:hover,
+.flatpickr-monthSelect-month.today:focus {
+  background: #959ea9;
+  border-color: #959ea9;
+  color: #fff;
+}
+
+.flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-month.endRange {
+  background-color: #569ff7;
+  box-shadow: none;
+  color: #fff;
+  border-color: #569ff7;
+}
+
+.flatpickr-monthSelect-month.startRange {
+  border-radius: 50px 0 0 50px;
+}
+
+.flatpickr-monthSelect-month.endRange {
+  border-radius: 0 50px 50px 0;
+}
+
+.flatpickr-monthSelect-month.startRange.endRange {
+  border-radius: 50px;
+}
+
+.flatpickr-monthSelect-month.inRange {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}