update gridjs java demo

Author: peterzhou-aspose

Examples.GridJs/README.md

@@ -1,29 +1,39 @@
 # Aspose.Cells for Java
 [Aspose.Cells.GridJs for Java](http://www.aspose.com/products/cells/java)  is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs.
 
-## How to Run the Examples
-1.edit the properties in src\main\resources\application.properties 
+## Preview
 
-#This is the excel directory to browse
-testconfig.ListDir=/app/wb
+ <img alt='demo' src='https://unpkg.com/[email protected]/preview.gif' />
 
-#Specific the spreadsheet file name in the directory to browse
-testconfig.FileName=chart.xlsx
+## How to Run the Examples
+###1.edit the properties in src\main\resources\application.properties to meet your local environment
+```properties
+# This is the directory contains the spread sheet files
+testconfig.ListDir=/app/wb
 
-#Directory for storing cache files
+# Directory for storing cache files
 testconfig.CachePath=/app/grid_cache
 
-2.run src\main\java\com\aspose\gridjs\demo\GridjsdemoApplication.java
+# Directory for storing upload files
+testconfig.UploadPath=/app/upload
 
-open browser and navigate to view the default spreadsheet file at http://localhost:8080/gridjsdemo/index or view all the files in the directory at http://localhost:8080/gridjsdemo/list
+# License file for Aspose.Cells
+testconfig.AsposeLicensePath=/app/license
+```
+###2.run src\main\java\com\aspose\gridjs\demo\GridjsdemoApplication.java
 
-## Step to run in docker 
+open browser and navigate to view all the files in the directory at http://localhost:8080/gridjsdemo/list
 
-docker build -t gridjs-demo-java .
+## Step to run in docker 
 
-docker run -d -p 8080:8080 gridjs-demo-java
+1. docker build -t gridjs-demo-java .
 
-open browser and enter the url:http://localhost:8080/gridjsdemo/index or http://localhost:8080/gridjsdemo/list
+2. run with aspose license file:
+      docker run -d -p 8080:8080  -v C:/path/to/license.txt:/app/license gridjs-demo-java
+   or just run the demo in trial mode:
+      docker run -d -p 8080:8080 gridjs-demo-java
+      
+3. open browser and enter the url: http://localhost:8080/gridjsdemo/list
 
 ## Resources
 

Examples.GridJs/pom.xml

@@ -51,12 +51,12 @@
 		 <dependency>  
   			<groupId>com.aspose</groupId>  
  			<artifactId>aspose-cells</artifactId>  
- 			<version>25.1</version> 
+ 			<version>25.2</version> 
  	    </dependency> 
         <dependency>  
   			<groupId>com.aspose</groupId>  
  			<artifactId>aspose-cells</artifactId>  
- 			<version>25.1</version> 
+ 			<version>25.2</version> 
  			<classifier>gridjs</classifier>  
  	    </dependency>
 	<!--	<dependency>

Examples.GridJs/src/main/java/com/aspose/gridjs/demo/GridjsdemoApplication.java

@@ -10,6 +10,8 @@
 import com.aspose.gridjs.Config;
 import com.aspose.gridjs.GridJsWorkbook;
 
+import java.io.File;
+
 import javax.annotation.PostConstruct;
 
 
@@ -81,9 +83,11 @@ public static void main(String[] args) {
 
 		 MyConfig myConfig = context.getBean(MyConfig.class);
 
-		 //set license for aspose cells
+		 //set license for Aspose.Cells
 		 com.aspose.cells.License  lic=new com.aspose.cells.License();
-		 //lic.setLicense(myConfig.asposeLicensePath);
+			if ((new File(myConfig.asposeLicensePath)).exists()) {
+				lic.setLicense(myConfig.asposeLicensePath);
+			}
 		 init(myConfig);
 
 	}

Examples.GridJs/src/main/resources/application.properties

@@ -8,6 +8,6 @@ testconfig.ListDir=/app/wb
 testconfig.FileName=chart.xlsx
 testconfig.CachePath=/app/grid_cache
 testconfig.UploadPath=/app/upload
-testconfig.AsposeLicensePath=/app/aspose.lic
+testconfig.AsposeLicensePath=/app/license
 
 

Examples.GridJs/src/main/resources/templates/fileFromUpload.html

@@ -40,7 +40,7 @@
 .big-div, canvas {
 	width: 100%;
 	height: 100%;
-	object-fit: contain;  
+	object-fit: contain; /* 对于图像或视频很有用 */
 }
     </style>
     <!--<link rel="stylesheet" href="./quantumui.min.22.5.5.2.css?v=20220312" />-->
@@ -51,12 +51,13 @@
     <script src="/xspread/jszip.min.js"></script>
     <!--    <script src="vconsole.min.js"></script> -->
     <!--for local reference-->
+    <!-- 
   <link rel="stylesheet" href="/xspread/xspreadsheet.css?v=20230525" />
      <script src="/xspread/xspreadsheet.js?v=20230525"></script>
-
+    -->
     <!--for release reference-->
-      <!--  <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@24.12.0/xspreadsheet.css">
-    <script src="https://unpkg.com/gridjs-spreadsheet@24.12.0/xspreadsheet.js"></script>  -->
+    <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.css">
+    <script src="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.js"></script>
 
 
 

Examples.GridJs/src/main/resources/templates/index.html

@@ -51,12 +51,14 @@
     <script src="/xspread/jszip.min.js"></script>
     <!--    <script src="vconsole.min.js"></script> -->
     <!--for local reference-->
-  <link rel="stylesheet" href="/xspread/xspreadsheet.css?v=20230525" />
+    <!--
+     <link rel="stylesheet" href="/xspread/xspreadsheet.css?v=20230525" />
      <script src="/xspread/xspreadsheet.js?v=20230525"></script>
+     -->
 
     <!--for release reference-->
-      <!--  <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@24.12.0/xspreadsheet.css">
-    <script src="https://unpkg.com/gridjs-spreadsheet@24.12.0/xspreadsheet.js"></script>  -->
+    <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.css">
+    <script src="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.js"></script> 
 
 
 

Examples.GridJs/src/main/resources/templates/list.html

@@ -71,18 +71,28 @@
             const url =  '/gridjsdemo/Uidtml?filename=' + filename+'&uid='+uid;
             window.open(url, "_blank");
         }
+        document.addEventListener('DOMContentLoaded', function() {
+        	document.getElementById('fileInput').addEventListener('change', function(event) {
+            	const file = event.target.files[0];
+            	if (file) {
+                	//console.log('文件已选择:', file.name);  
+                	document.getElementById('uploadForm').submit();  
+            	}  
+        	});
+        });
     </script>
     <!-- 文件上传表单 -->
 
  <div class="upload-form">
-<form method="post" action="/gridjsdemo/upload" enctype="multipart/form-data">
+  <h4>Upload a local file to start show workbook</h4>
+<form id="uploadForm" method="post" action="/gridjsdemo/upload" enctype="multipart/form-data" >
     <!-- accept属性用于限定可接受的文件类型 -->
-    <input type="file" name="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required/>
-    <button type="submit">upload</button>
+    <input id="fileInput" type="file" name="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" required/>
+     
 </form>
 </div>
 <div class="file-list">
- <h2>choose a file from the navigation path</h2>
+ <h4>Navigate one of the below file to start show workbook</h4>
     <div th:each="item : ${filelist}">
         <a href="javascript:void(0)" target="_blank" th:data-filename="${item[0]}"  th:data-uid="${item[1]}"   onclick="openfile(this)">
             <em th:text="${item[0]}"></em>