瀏覽代碼

初始化项目

zhuwei 6 年之前
父節點
當前提交
84e46693f2
共有 5 個文件被更改,包括 583 次插入0 次删除
  1. 77 0
      index.html
  2. 169 0
      js/index.js
  3. 56 0
      js/util.js
  4. 251 0
      package-lock.json
  5. 30 0
      package.json

+ 77 - 0
index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Excel Preview</title>
+	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+	<link rel="stylesheet" href="node_modules/bootstrap-table/dist/bootstrap-table.min.css">
+	<style>
+		.excel-box {
+			min-height: 700px;
+		}
+		.box.box-default {
+		    border-top-color: #d2d6de;
+		}
+		.box {
+		    position: relative;
+		    border-radius: 3px;
+		    background: #ffffff;
+		    border-top: 3px solid #d2d6de;
+		    margin-bottom: 20px;
+		    width: 100%;
+		    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+		    margin-top: 20px;
+		}
+		.content {
+			margin-top: 20px;
+		}
+		.excel-box {
+			padding: 20px;
+		}
+		.excel-box .nav-tabs > li.active {
+			border-top: 3px solid #d12610;
+			margin-top: 0;
+			position: relative;
+		}
+		.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
+			margin-right: 0px;
+		}
+		.nav-tabs>li>a {
+			border-radius: 0;
+		}
+		.tab-pane{
+			padding: 20px;
+		}
+	</style>
+</head>
+<body>
+
+	<div class="container">
+		<section>
+			<div class="content">
+				<input type="file" name="file" id="file">
+				<div class="box box-default">
+					<div class="excel-box">
+						<ul class="nav nav-tabs" role="tablist" id="tabNav">
+						</ul>
+						<div class="tab-content" id="tabContent">
+							<div role="tabpanel" class="tab-pane active" id="tabPanel">
+								
+							</div>
+						</div>
+					</div>
+				</div>				
+			</div>			
+		</section> 
+	</div>
+	
+	<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
+	<script src="node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
+	<script src="node_modules/bootstrap-table/dist/bootstrap-table.min.js" type="text/javascript"></script>
+	<script src="node_modules/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
+	<script src="node_modules/xlsx-style/dist/xlsx.full.min.js" type="text/javascript"></script>
+	<script src="js/util.js"></script>
+	<script src="js/index.js"></script>
+</body>
+</html>

+ 169 - 0
js/index.js

@@ -0,0 +1,169 @@
+(function() {
+	'use strict';
+	function getTableData(sheet) {
+		const headers = []
+		const range = XLSX.utils.decode_range(sheet['!ref'])
+		let C
+		const R = range.s.r /* start in the first row */
+		for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+			var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
+			headers.push({
+				field: 'column_' + C,
+				title: 'column_' + C
+			})
+		}
+		let datas = [];
+		for(let rowIndex = range.s.r; rowIndex <= range.e.r; ++rowIndex) {
+			let data = {};
+			for (let colIndex = range.s.c; colIndex <= range.e.c; ++colIndex) { /* walk every column in the range */
+				var cell = sheet[XLSX.utils.encode_cell({ c: colIndex, r: rowIndex })]; /* find the cell in the first row */
+				data['column_' + colIndex] = XLSX.utils.format_cell(cell);
+			}
+			datas.push(data);
+		}
+
+		return {
+			columns: headers,
+			data: datas
+		}
+	}
+
+	function mergeCell(merge) {
+		let rowspan = Math.abs(merge.e.r - merge.s.r + 1);
+		let colspan = Math.abs(merge.e.c - merge.s.c + 1);
+		$('#table').bootstrapTable('mergeCells', {
+			index: merge.s.r, 
+			field: 'column_' + merge.s.c,
+			rowspan: rowspan, 
+			colspan: colspan
+		});
+	}
+
+	function mergeCells(worksheet) {
+		var merges = worksheet['!merges'];
+		if (!merges) { return; }
+		merges.forEach((merge, index) => {
+			mergeCell(merge);
+		})
+	}
+
+	//TODO 
+	/**
+	 * key = AA2, start: A1, end = AA8, return {r: 1, c: 26}
+	 * @param {*} key 
+	 * @param {*} start 
+	 * @param {*} end 
+	 */
+	function getRowColIndex(key, start) {
+		start = CUSTOM_UTIL.splitRC(start);
+		key = CUSTOM_UTIL.splitRC(key);
+		let col = key.c - start.c ;
+		let row = CUSTOM_UTIL.computeR(key.r, start.r);
+		return {
+			r: col,
+			c: row
+		}
+	}
+
+	function setCellStyle(rowColIndex, style) {
+		var cellDom = $("#table > tbody").find('tr:eq(' + rowColIndex.r + ')').find('td:eq(' + rowColIndex.c + ')');
+		if(style.font) {
+			cellDom.css('fontWeight', style.font.bold ? 'bold' : 'normal');
+			if(style.font.color) {
+				style.font.color.rgb = style.font.color.rgb == 'FFFFFF' ? 'FF000000' : style.font.color.rgb;
+				cellDom.css('color', CUSTOM_UTIL.rgbaToRgb(style.font.color.rgb));
+			}
+		}
+		if (style.fill && style.fill.fgColor) {
+			cellDom.css('backgroundColor', CUSTOM_UTIL.rgbaToRgb(style.fill.fgColor));
+		}
+		if (style.alignment && style.alignment.horizontal) {
+			let alignMap = {'bottom': 'left', 'center': 'center', 'top': 'right'};
+			cellDom.css('textAlign', alignMap[style.alignment.horizontal]);
+		}
+	}
+
+	function setStyles(worksheet) {
+		var range = worksheet['!ref'].split(":");
+		var start = range[0], end = range[1];
+		for(let key in worksheet) {
+			if(key >= start && key <= end) {
+				var rowColIndex = getRowColIndex(key, start, end);
+				var style = worksheet[key].s;
+				if(!style) {return;}
+				setCellStyle(rowColIndex, style);
+			}
+		}
+	}
+
+	function loadTabContent(sheetName, workbook) {
+		var worksheet = workbook.Sheets[sheetName];
+		var tableConf = {
+			height: 600,
+			showHeader: false
+		};
+		var tableData = getTableData(worksheet);
+		$.extend(tableConf, tableData)
+		$('#table').bootstrapTable(tableConf);
+		setStyles(worksheet);
+		mergeCells(worksheet);
+	}
+
+
+	function tabChange(target, workbook) {
+		let sheetName = target.html();
+		$("#tabNav > li").removeClass('active');
+		target.parent('li').addClass('active');
+		$("#tabPanel").empty().append('<div class="table-container"><table id="table"></table></div>');
+		loadTabContent(sheetName, workbook);
+		// $("#tabPanel").html(sheetName);
+	}
+
+	function initTabs(sheetNames, workbook) {
+		$("#tabNav").empty();
+		$("#tabPanel").empty();
+		sheetNames.forEach(sheet => {
+			let nav = $(`<li role="presentation"><a role="tab" data-toggle="tab">${sheet}</a></li>`);
+			nav.find('a').on('click', (e) => {
+				tabChange($(e.target), workbook);
+			});
+			$("#tabNav").append(nav);
+			tabChange($("#tabNav > li:first > a"), workbook);
+			$("#tabNav > li:first").addClass('active');
+		})
+	}
+
+	function loadFile(e) {
+		let file = e.target.files;
+		var fileReader = new FileReader();
+		fileReader.onload = (ev) => {
+		    try {
+		      var data = ev.target.result,
+		        workbook = XLSX.read(data, {
+							type: 'binary',
+							cellStyles: true
+		        }), // 以二进制流方式读取得到整份excel表格对象
+		        persons = []; // 存储获取到的数据
+		    } catch (e) {
+		      console.log('文件类型不正确');
+		      return;
+		    }
+
+		    //所有表名
+		    var sheetNames = workbook.SheetNames; // 返回 ['sheet1', 'sheet2']
+
+			initTabs(sheetNames, workbook);
+
+		    // //根据表名获取对应某张表
+		    // var worksheet = workbook.Sheets[sheetNames[0]];
+		}
+ 		fileReader.readAsBinaryString(file[0]);
+	}
+
+	$(function() {
+		$("#file").on('change', function(e) {
+			loadFile(e);
+		})	
+	})
+
+})()

+ 56 - 0
js/util.js

@@ -0,0 +1,56 @@
+// 'use strict'
+
+var CUSTOM_UTIL = function(){
+
+    var transformStr = function(input) {
+        let inputArr = [...input];
+        let sum = 0;
+        for(let i = 0; i < inputArr.length; i++) {
+            sum += Math.pow(26, i) * (inputArr[i].charCodeAt() - "A".charCodeAt());
+        }
+        return sum;
+    };
+
+    return {
+        rgbaToRgb: function(rgba) {
+            var reg = /^([0-9a-fA-f]{8})$/;
+            if(!rgba || !reg.test(rgba)) {
+                return 'rgba(255, 255, 255, 0)';
+            }
+            let a = parseInt(rgba.substring(0, 2), 16);
+            let r = parseInt(rgba.substring(2, 4), 16);
+            let g = parseInt(rgba.substring(4, 6), 16);
+            let b = parseInt(rgba.substring(6, 8), 16);
+
+            return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
+        },
+
+        splitRC: function(rc) {
+            let rcArr = [...rc];
+            let index = 0;
+            var i = 0;
+            for(i = 0; i < rcArr.length; i++) {
+                if (/^([1-9]*)$/.test(rcArr[i])) {
+                    break;
+                }
+            }
+            if(i < rcArr.length) {
+                return {
+                    c: Number(rc.substring(i)),
+                    r: rc.substring(0, i)
+                }
+            }
+            return {
+                r: 0,
+                c: rc.substring(0, i)
+            }
+        },
+
+        /**
+         *  BA - D
+        */
+        computeR: function(end, start) {
+            return transformStr(end) - transformStr(start);
+        }
+    }
+}();

+ 251 - 0
package-lock.json

@@ -0,0 +1,251 @@
+{
+  "name": "excelpreview",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "requires": {
+        "exit-on-epipe": "1.0.1",
+        "printj": "1.1.2"
+      }
+    },
+    "bootstrap": {
+      "version": "3.4.0",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/bootstrap/-/bootstrap-3.4.0.tgz",
+      "integrity": "sha1-+Nd1QN0wYig9KudofiHB5pGWFkA="
+    },
+    "bootstrap-table": {
+      "version": "1.13.1",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/bootstrap-table/-/bootstrap-table-1.13.1.tgz",
+      "integrity": "sha1-x19vBGYMeFdX7k/Z2oflS+Y9MLE="
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha1-MnE7wCj3XAL9txDXx7zsHyxgcO8="
+    },
+    "cfb": {
+      "version": "1.1.0",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/cfb/-/cfb-1.1.0.tgz",
+      "integrity": "sha1-RPsbMO7gFPpWM6DtXybIf9dleZo=",
+      "requires": {
+        "adler-32": "1.2.0",
+        "commander": "2.17.1",
+        "crc-32": "1.2.0",
+        "printj": "1.1.2"
+      }
+    },
+    "codepage": {
+      "version": "1.14.0",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
+      "requires": {
+        "commander": "2.14.1",
+        "exit-on-epipe": "1.0.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.14.1",
+          "resolved": "http://192.168.10.173:8081/repository/npm-group/commander/-/commander-2.14.1.tgz",
+          "integrity": "sha1-IjUSPjevjKPGXfRbAm29NXsBuao="
+        }
+      }
+    },
+    "colors": {
+      "version": "0.6.2",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/colors/-/colors-0.6.2.tgz",
+      "integrity": "sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w="
+    },
+    "commander": {
+      "version": "2.17.1",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/commander/-/commander-2.17.1.tgz",
+      "integrity": "sha1-vXerfebelCBc6sxy8XFtKfIKd78="
+    },
+    "concat-stream": {
+      "version": "2.0.0",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha1-QUz1r3kKSMYKub5FJ9VtXkETPLE=",
+      "requires": {
+        "buffer-from": "1.1.1",
+        "inherits": "2.0.3",
+        "readable-stream": "3.1.1",
+        "typedarray": "0.0.6"
+      }
+    },
+    "crc-32": {
+      "version": "1.2.0",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha1-yy224puIUI4y2d0OwWk+e0Ghggg=",
+      "requires": {
+        "exit-on-epipe": "1.0.1",
+        "printj": "1.1.2"
+      }
+    },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha1-C92S6H1ShdJn2qgXHQ6wYVlolpI="
+    },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha1-PXT39keMiKG1AgMG10fcYxPHTQs="
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha1-lYzinoHJeQ8xvneS311NlfxX+8o="
+    },
+    "jszip": {
+      "version": "2.4.0",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/jszip/-/jszip-2.4.0.tgz",
+      "integrity": "sha1-SHqTt2w7/6bLCFzWHrk06r4tKU8=",
+      "requires": {
+        "pako": "0.2.9"
+      }
+    },
+    "pako": {
+      "version": "0.2.9",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU="
+    },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha1-2Q3rKXWoufYA+zoclOP0xTx4oiI="
+    },
+    "readable-stream": {
+      "version": "3.1.1",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/readable-stream/-/readable-stream-3.1.1.tgz",
+      "integrity": "sha1-7Wu8bFuliwkAOf8YzmcFFXla6wY=",
+      "requires": {
+        "inherits": "2.0.3",
+        "string_decoder": "1.2.0",
+        "util-deprecate": "1.0.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
+    },
+    "ssf": {
+      "version": "0.10.2",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/ssf/-/ssf-0.10.2.tgz",
+      "integrity": "sha1-ZbK0/N/ZZ7yOg4OkE0kAmJMRWXY=",
+      "requires": {
+        "frac": "1.1.2"
+      }
+    },
+    "string_decoder": {
+      "version": "1.2.0",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/string_decoder/-/string_decoder-1.2.0.tgz",
+      "integrity": "sha1-/obnOLGVRK/nBGkkOyoe6SQOro0=",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "voc": {
+      "version": "1.1.0",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/voc/-/voc-1.1.0.tgz",
+      "integrity": "sha1-0aCK7/ZmRr8XzbouR8k1p6mwIYs="
+    },
+    "xlsx": {
+      "version": "0.14.1",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/xlsx/-/xlsx-0.14.1.tgz",
+      "integrity": "sha1-7O31Nr0elAVUhv9IT1iI3KqJvT0=",
+      "requires": {
+        "adler-32": "1.2.0",
+        "cfb": "1.1.0",
+        "codepage": "1.14.0",
+        "commander": "2.17.1",
+        "crc-32": "1.2.0",
+        "exit-on-epipe": "1.0.1",
+        "ssf": "0.10.2"
+      }
+    },
+    "xlsx-style": {
+      "version": "0.8.13",
+      "resolved": "http://192.168.10.173:8081/repository/npm-group/xlsx-style/-/xlsx-style-0.8.13.tgz",
+      "integrity": "sha1-7SONa4wFYvlEfCkGq73tLTOeBIY=",
+      "requires": {
+        "adler-32": "1.2.0",
+        "cfb": "1.1.0",
+        "codepage": "1.3.8",
+        "commander": "2.19.0",
+        "crc-32": "1.2.0",
+        "jszip": "2.4.0",
+        "ssf": "0.8.2"
+      },
+      "dependencies": {
+        "adler-32": {
+          "version": "1.2.0",
+          "resolved": "http://192.168.10.173:8081/repository/npm-group/adler-32/-/adler-32-1.2.0.tgz",
+          "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+          "requires": {
+            "exit-on-epipe": "1.0.1",
+            "printj": "1.1.2"
+          }
+        },
+        "codepage": {
+          "version": "1.3.8",
+          "resolved": "http://192.168.10.173:8081/repository/npm-group/codepage/-/codepage-1.3.8.tgz",
+          "integrity": "sha1-Ty5dfAl13ij4hJgFjcta/KtqX3E=",
+          "requires": {
+            "commander": "2.19.0",
+            "concat-stream": "2.0.0",
+            "voc": "1.1.0"
+          }
+        },
+        "commander": {
+          "version": "2.19.0",
+          "resolved": "http://192.168.10.173:8081/repository/npm-group/commander/-/commander-2.19.0.tgz",
+          "integrity": "sha1-9hmKqE5bg8RgVLlN3tv+1e6f8So="
+        },
+        "crc-32": {
+          "version": "1.2.0",
+          "resolved": "http://192.168.10.173:8081/repository/npm-group/crc-32/-/crc-32-1.2.0.tgz",
+          "integrity": "sha1-yy224puIUI4y2d0OwWk+e0Ghggg=",
+          "requires": {
+            "exit-on-epipe": "1.0.1",
+            "printj": "1.1.2"
+          }
+        },
+        "frac": {
+          "version": "0.3.1",
+          "resolved": "http://192.168.10.173:8081/repository/npm-group/frac/-/frac-0.3.1.tgz",
+          "integrity": "sha1-V3Z3t/3L5vr3xGHxgB00E3zaQ1Q="
+        },
+        "ssf": {
+          "version": "0.8.2",
+          "resolved": "http://192.168.10.173:8081/repository/npm-group/ssf/-/ssf-0.8.2.tgz",
+          "integrity": "sha1-udTcahwbz3b4q/qW19dlb7Kr7NY=",
+          "requires": {
+            "colors": "0.6.2",
+            "frac": "0.3.1",
+            "voc": "1.1.0"
+          }
+        }
+      }
+    }
+  }
+}

+ 30 - 0
package.json

@@ -0,0 +1,30 @@
+{
+  "name": "excelpreview",
+  "version": "1.0.0",
+  "description": "Preview Excel online",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sumile-ting/excelPreview.git"
+  },
+  "keywords": [
+    "excel",
+    "sheetjs"
+  ],
+  "author": "zhuwei",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/sumile-ting/excelPreview/issues"
+  },
+  "homepage": "https://github.com/sumile-ting/excelPreview#readme",
+  "dependencies": {
+    "bootstrap": "^3.4.0",
+    "bootstrap-table": "^1.13.1",
+    "jquery": "^3.3.1",
+    "xlsx": "^0.14.1",
+    "xlsx-style": "^0.8.13"
+  }
+}