master

分支 (1)

管理

管理

master

luckysheet-demo
/
index.html

<!DOCTYPE html>
<html>

<head lang='zh'>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
	<title>Luckysheet</title>

	<style type="text/css">
		html,body{
			height: 100%;
			padding: 0px;
			margin: 0px;
		}
		.layout{
			display: block;
			position: relative;
			margin: 0;
			padding: 0;
		}
		.layout-header{
			text-align: center;
		}
		.layout-right{
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			padding: 0px;
			width: 200px;
			min-height: 99.98vh;
			border-left: 1px solid;
			border-color: #e8eaec;
			background: #fff;
			border-radius: 4px;
			font-size: 14px;
			-webkit-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
		}
		.layout-middle{
			display: block;
			position: absolute;
			left: 200px;
			right: 0;
			width: calc(100% - 200px);
			margin: 0;
			padding: 0;
		}
	</style>

	<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
	<link rel='stylesheet' href='./plugins/plugins.css' />
	<link rel='stylesheet' href='./css/luckysheet.css' />
	<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
	<script src="./plugins/js/plugin.js"></script>
	<script type="text/javascript" src="./Sortable/Sortable.min.js"></script>

	<!-- rollup luckysheet.js -->
	<script src="./js/luckysheet.umd.js"></script>
	<script src="./js/luckyexcel.umd.js"></script>

    <script src="./exceljs/exceljs.bare.js"></script>
    <script src="./js/excelutils.js"></script>
</head>

<body>
	<div class="layout">
		<div class="layout-right">
			<div style="width:100px;padding:20px" id="items">
				<li onclick="setCell()">1111</li>
				<li>2222222222</li>
				<li>3333</li>
				<li>444</li>
				<li>555</li>
			  </div>
		</div>
		<div class="layout-middle">

			<div class="layout-header">
				<button onclick="doExport()">导出</button>
				<input style="font-size:16px;" type="file" id="Luckyexcel-demo-file" name="Luckyexcel-demo-file" change="demoHandler" />
				<button onclick="doPrint()">打印</button>
			</div>

			<div id="luckysheet" style="margin: 0px; padding: 0px; position: absolute; width: 100%; height: 95vh; left: 0px; top: 30px; bottom: 0px;"></div>
		</div>
	</div>
	<script>

	  var loc_row=0,loc_column=0;
		$(function () {
            var options = null;
                options = {
                    container: 'luckysheet',
					lang: 'zh',
					// pager: {
					// 	pageIndex: 1,
					// 	pageSize: 10,
					// 	total: 50,
					// 	selectOption: [10, 20]
					// },
					forceCalculation:false,
					plugins: ['chart'],
					fontList:[
						{
						"fontName":"HanaleiFill",
						"url":"./assets/iconfont/HanaleiFill-Regular.ttf"
						},
						{
						"fontName":"Anton",
						"url":"./assets/iconfont/Anton-Regular.ttf"
						},
						{
						"fontName":"Pacifico",
						"url":"./assets/iconfont/Pacifico-Regular.ttf"
						}
					],
					hook:{
						cellDragStop: function (cell, postion, sheetFile, ctx, event) {
			                // console.info(cell, postion, sheetFile, ctx, event);
			            },
						rowTitleCellRenderBefore:function(rowNum,postion,ctx){
							// console.log(rowNum);
						},
						rowTitleCellRenderAfter:function(rowNum,postion,ctx){
							// console.log(ctx);
						},
						columnTitleCellRenderBefore:function(columnAbc,postion,ctx){
							// console.log(columnAbc);
						},
						columnTitleCellRenderAfter:function(columnAbc,postion,ctx){
							// console.log(postion);
						},
						cellRenderBefore:function(cell,postion,sheetFile,ctx){
							// console.log(cell,postion,sheetFile,ctx);
						},
						cellRenderAfter:function(cell,postion,sheetFile,ctx){
							// console.log(postion);
						},
						cellMousedownBefore:function(cell,postion,sheetFile,ctx){
							// console.log(postion);
						},
						cellMousedown:function(cell,postion,sheetFile,ctx){
							loc_row=postion.r;
							loc_column=postion.c;
							console.log(loc_row,loc_column);
							// console.log(sheetFile);
						},
						sheetMousemove:function(cell,postion,sheetFile,moveState,ctx){
							//loc_row=postion.r;
							//loc_column=postion.c;
							//console.log(loc_row,loc_column);
							//console.log(cell,postion,sheetFile,moveState,ctx);
						},
						sheetMouseup:function(cell,postion,sheetFile,moveState,ctx){
							//console.log(cell,postion,sheetFile,moveState,ctx);
						},
						cellAllRenderBefore:function(data,sheetFile,ctx){
							// console.info(data,sheetFile,ctx)
						},
						updated:function(operate){
							// console.info(operate)
						},
						cellUpdateBefore:function(r,c,value,isRefresh){
							// console.info('cellUpdateBefore',r,c,value,isRefresh)
						},
						cellUpdated:function(r,c,oldValue, newValue, isRefresh){
							// console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
						},
						sheetActivate:function(index, isPivotInitial, isNewSheet){
							// console.info(index, isPivotInitial, isNewSheet)
						},
						rangeSelect:function(index, sheet){
							// console.info(index, sheet)
						},
						commentInsertBefore:function(r, c){
							// console.info(r, c)
						},
						commentInsertAfter:function(r, c, cell){
							// console.info(r, c, cell)
						},
						commentDeleteBefore:function(r, c, cell){
							// console.info(r, c, cell)
						},
						commentDeleteAfter:function(r, c, cell){
							// console.info(r, c, cell)
						},
						commentUpdateBefore:function(r, c, value){
							// console.info(r, c, value)
						},
						commentUpdateAfter:function(r, c, oldCell, newCell ){
							// console.info(r, c, oldCell, newCell)
						},
						cellEditBefore:function(range ){
							// console.info(range)
						},
						workbookCreateAfter:function(json){
							// console.info(json)
						},
						rangePasteBefore:function(range,data){
							// console.info('rangePasteBefore',range,data)
							// return false; //Can intercept paste
						},


					},
					/*data:
					[sheetCell,sheetFormula,sheetConditionFormat,sheetSparkline,sheetTable,sheetComment,sheetPivotTableData,sheetPivotTable,sheetChart,sheetPicture,sheetDataVerification]*/
				}
			options.loading={
				image:()=>{
					return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
				},
				imageClass:"loadingAnimation"
			}
			options.cellRightClickConfig = {
				customs: [{
					title: 'test',
					onClick: function (clickEvent, event, params) {
						console.log('function test click', clickEvent, event, params)
					}
				}]
			}
			luckysheet.create(options);
			})

			function setCell()
			{
				luckysheet.setCellValue(loc_row, loc_column, '1111111wwsss');
			}

			function doExport()
			{
				console.log(luckysheet.getAllSheets());
				exportSheetExcel(luckysheet,"file");
			}
	</script>

	<script>
		function demoHandler(){
			let upload = document.getElementById("Luckyexcel-demo-file");
			let selectADemo = document.getElementById("Luckyexcel-select-demo");
			let downlodDemo = document.getElementById("Luckyexcel-downlod-file");
			let mask = document.getElementById("lucky-mask-demo");
			if(upload){

				window.onload = () => {

					upload.addEventListener("change", function(evt){
						var files = evt.target.files;
						if(files==null || files.length==0){
							alert("No files wait for import");
							return;
						}

						let name = files[0].name;
						let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length-1];
						if(suffix!="xlsx"){
							alert("Currently only supports the import of xlsx files");
							return;
						}
						LuckyExcel.transformExcelToLucky(files[0], function(exportJson, luckysheetfile){

							if(exportJson.sheets==null || exportJson.sheets.length==0){
								alert("Failed to read the content of the excel file, currently does not support xls files!");
								return;
							}
							console.log(exportJson, luckysheetfile);
							window.luckysheet.destroy();

							window.luckysheet.create({
								container: 'luckysheet', //luckysheet is the container id
								showinfobar:false,
								data:exportJson.sheets,
								title:exportJson.info.name,
								userInfo:exportJson.info.name.creator
							});
						});
					});

					selectADemo.addEventListener("change", function(evt){
						var obj = selectADemo;
						var index = obj.selectedIndex;
						var value = obj.options[index].value;
						var name = obj.options[index].innerHTML;
						if(value==""){
							return;
						}
						mask.style.display = "flex";
						LuckyExcel.transformExcelToLuckyByUrl(value, name, function(exportJson, luckysheetfile){

							if(exportJson.sheets==null || exportJson.sheets.length==0){
								alert("Failed to read the content of the excel file, currently does not support xls files!");
								return;
							}
							console.log(exportJson, luckysheetfile);
							mask.style.display = "none";
							window.luckysheet.destroy();

							window.luckysheet.create({
								container: 'luckysheet', //luckysheet is the container id
								showinfobar:false,
								data:exportJson.sheets,
								title:exportJson.info.name,
								userInfo:exportJson.info.name.creator
							});
						});
					});

					downlodDemo.addEventListener("click", function(evt){
						var obj = selectADemo;
						var index = obj.selectedIndex;
						var value = obj.options[index].value;

						if(value.length==0){
							alert("Please select a demo file");
							return;
						}

						var elemIF = document.getElementById("Lucky-download-frame");
						if(elemIF==null){
							elemIF = document.createElement("iframe");
							elemIF.style.display = "none";
							elemIF.id = "Lucky-download-frame";
							document.body.appendChild(elemIF);
						}
						elemIF.src = value;
					});
				}
			}
		}
		demoHandler();
	</script>
<style>
	/* 自定义loading演示样式 */
	@keyframes loading-rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		100% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}

	.loadingAnimation {
		width: 3em;
		height: 3em;
		animation: loading-rotate 2s linear infinite;
	}

	.loadingAnimation circle {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		stroke-width: 2;
		stroke: currentColor;
		stroke-linecap: round;
	}
</style>
</body>

</html>