refactor(print developing): defined config

src/controllers/constant.js

@@ -5,6 +5,7 @@ import Store from '../store';
 const gridHTML = function(){ 
     const _locale = locale();
     const locale_info = _locale.info;
+    const locale_print = _locale.print;
     
     return `<div class="luckysheet">
                     <canvas id="luckysheetTableContentF" style="display:none;" class="luckysheetTableContent"></canvas> 
@@ -214,7 +215,7 @@ const gridHTML = function(){
                         </div> 
                         <div class="luckysheet-stat-area"> 
                             <div class="luckysheet-sta-c">
-                                <div class="luckysheet-zoom-content" id="uckysheet-zoom-content">
+                                <div class="luckysheet-zoom-content" id="luckysheet-zoom-content">
                                     <div class="luckysheet-zoom-minus" id="luckysheet-zoom-minus">
                                         <div class="luckysheet-zoom-minus-icon"></div>
                                     </div>
@@ -227,7 +228,12 @@ const gridHTML = function(){
                                         <div class="luckysheet-zoom-plus-icon"></div>
                                     </div>
                                     <div class="luckysheet-zoom-ratioText" id="luckysheet-zoom-ratioText">100%</div>
-                                </div>  
+                                </div>
+                                <div class="luckysheet-print-viewList">
+                                    <div class="luckysheet-print-viewBtn luckysheet-print-viewNormal luckysheet-print-viewBtn-active" title="${locale_print.normalBtn}"><i class="icon iconfont icon-caidan1"></i></div>
+                                    <div class="luckysheet-print-viewBtn luckysheet-print-viewLayout" title="${locale_print.layoutBtn}"><i class="icon iconfont icon-caidan1"></i></div>
+                                    <div class="luckysheet-print-viewBtn luckysheet-print-viewPage" title="${locale_print.pageBtn}"><i class="icon iconfont icon-caidan1"></i></div>
+                                </div>
                                 <div class="luckysheet-sta-content" id="luckysheet-sta-content"></div>  
                                 <div class="luckysheet-bottom-content" id="luckysheet-bottom-content-show"></div>  
                             </div> 

src/controllers/print.js

@@ -1,6 +1,16 @@
 import { jsPDF } from "jspdf";
 
-
+let ExcelPlaceholder = {
+    "[tabName]":"&A",
+    "[CurrentDate]":"&D",
+    "[fileName]":"&F",
+    "[background]":"&G",
+    "[Shadow]":"&H",
+    "[TotalPages]":"&N",
+    "[pageNumber]":"&P",
+    "[CurrentTime]":"&T",
+    "[filePath]":"&Z",
+}
 
 // Get the pixel value per millimeter
 function getOneMmsPx (){

src/css/luckysheet-core.css

@@ -972,7 +972,7 @@
 .luckysheet-sta-c .luckysheet-sta-content {
     position: absolute;
     left: 0px;
-    right: 220px;
+    right: 358px;
     height: 22px;
     line-height: 22px;
     text-align: right;

src/css/luckysheet-print.css

@@ -0,0 +1,53 @@
+.luckysheet-print-viewList{
+    position: absolute;
+    width:126px;
+    right: 222px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    user-select: none;
+}
+
+.luckysheet-print-viewBtn {
+    position: absolute;
+    left: 0px;
+    width: 42px;
+    height:22px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.luckysheet-print-viewBtn .iconfont{
+    font-size: 22px;
+}
+
+.luckysheet-print-viewBtn:hover{
+    background: #E1E4E8;
+}
+
+.luckysheet-print-viewBtn-active{
+    background: #dcdcdc;
+    cursor: default;
+}
+
+.luckysheet-print-viewBtn-active:hover{
+    background: #dcdcdc;
+}
+
+.luckysheet-print-viewNormal{
+    left: 0px;
+}
+
+.luckysheet-print-viewLayout{
+    left: 42px;
+}
+
+.luckysheet-print-viewPage{
+    left: 84px;
+}
+

src/index.html

@@ -80,6 +80,7 @@
 				// 						"un":"1",//underline
 				// 						"bl":"1",//blod
 				// 						"it":"0",//italic
+				//                      "ss":0,//0 none 1sup 2sub
 				// 						v:"交给警\r\n察叔叔\r\n"
 				// 					},
 				// 				]
@@ -143,21 +144,21 @@
 							},
 							headerFooter:{
 								firstFooter:{
-									left:[
+									left:[//&L
 										{
-											"ff":"Arial", //font family
-											"fc":"#fff000",//font color
-											"fs":12,//font size
+											"ff":"Arial", //font family &"-,Regular" or &"font name,font type"
+											"fc":"#fff000",//font color &K
+											"fs":12,//font size &font-size
 											"cl":0,//strike
-											"un":0,//underline
-											"bl":0,//blod
-											"it":0,//italic
-											"ss":0,//0 none 1sup 2sub
+											"un":0,//underline &E double,  &U single
+											"bl":0,//blod &B
+											"it":0,//italic &I
+											"ss":0,//0 none 1sup &X,  2sub &Y
 											v:"我在马路\r\n边捡到\r\n\r\n一分钱"
 										}
 									],
-									center:[],
-									right:[],
+									center:[],//&C
+									right:[],//&R
 								}, //First Page Footer
 								firstHeader:null, //First Page Header
 								oddFooter:"&C第 &P 页&R&G", //Odd Page Footer

src/locale/en.js

@@ -1155,6 +1155,11 @@ export default {
         selectionIsNullAlert:"Selection is required!",
         sheetDataIsNullAlert:"error, Data is none!",
 
+    },
+    print:{
+        normalBtn:"Normal",
+        layoutBtn:"Page Layout",
+        pageBtn:"Page break preview",
     }
   };
   

src/locale/zh.js

@@ -1170,5 +1170,11 @@ export default {
         tipsAll:"全部选中",
         selectionIsNullAlert:"请选择一个范围！",
         sheetDataIsNullAlert:"数据为空无法设置！",
+    },
+    print:{
+        normalBtn:"常规视图",
+        layoutBtn:"页面布局",
+        pageBtn:"分页预览",
     }
+
 };