要約: この記事は元々、Grape City の技術チームによって CSDN に公開されたものです。転載元を明記してください:グレープシティ公式ウェブサイト、グレープシティは、開発者に力を与えるための専門的な開発ツール、ソリューション、サービスを開発者に提供します。

序文

Excel レポートプラットフォームは、ユーザーがレポートデータをアップロード、編集、分析し、データの視覚化を実現できる強力で操作が簡単なシステムプラットフォームです。

この記事で説明するプラットフォームには主に次の機能が含まれています。

サーバー上の既存の Excel ファイルを開きます。
ToJson を呼び出し、ssjson をクライアントに転送します。
ブラウザで、サーバーから ssjson を使用して fromJSON を呼び出します。
Excelテンプレートの内容が確認できます。
テンプレートはオンラインで編集したり、テンプレートにデータを入力したりできます。
変更内容をExcelファイルでダウンロードして表示できます。

プロジェクトのスクリーンショット

Excel テンプレートのデモ:

入札トラッカー:

やることリスト:

住所録：

レポートファイルをアップロードします:

メインコード:

フロントエンド (React) コードファイルのパス:

src

│ boot.tsx

│ GC.GcExcel.d.ts

│ routes.tsx

│ tree.txt

│ utility.ts

│ 

├─components

│   ExcelIODemo.tsx

│   ExcelTemplateDemo.tsx

│   Home.tsx

│   Layout.tsx

│   NavMenu.tsx

│   ProgrammingDemo.tsx

│   

├─css

│   react-select.css

│   site.css

│   vendor.css

│   

└─spread.sheets

  │ gc.spread.sheets.all.11.0.6.min.js

  │ gc.spread.sheets.Excel2013white.11.0.6.css

  │ gc.spread.sheets.Excel2016colorful.11.0.6.css

  │ 

  └─pluggable

      gc.spread.sheets.charts.11.0.6.min.js

フロントエンドコード:

1. Excel テンプレートのデモページ (ExcelTemplateDemo.tsx):

public render() {
    
      
 return <div className='spread-page'>  
 <h1>Excel Template Demo</h1>  
 <p>This example demonstrates how to use <strong>GcExcel</strong> as server spreadsheet model, and use <strong>Spread.Sheets</strong> as client side viewer or editor: </p>  
 <ul>  
 <li><strong>GcExcel</strong> will first open an Excel file existing on server.</li>  
 <li><strong>GcExcel</strong> then inoke <strong>ToJson</strong> and transport the ssjson to client side.</li>  
 <li>In browser, <strong>Spread.Sheets</strong> will invoke <strong>fromJSON</strong> with the ssjson from server.</li>  
 <li>Then, you can see the content of the Excel template in <strong>Spread.Sheets</strong>.</li>  
 <li>At same time, you can fill or edit data on the template through <strong>Spread.Sheets</strong>.</li>  
 <li>At last, you can download to view the changes in Excel file.</li>  
 </ul>  
 <br>  
 <div id='spreadjs' className='spread-div' >  
 </div>;  
}  

componentDidMount() {
    
      
 this.spread = new GC.Spread.Sheets.Workbook(**document**.getElementById('spreadjs'), {
    
      
 seetCount: 1  
 });  

 this.loadSpreadFromTemplate();  
}

2. プログラミング API デモインターフェイス (入札トラッカー、ToDo リスト、アドレス帳) (ProgrammingDemo.tsx):

public render() {
    
      
 return <div className='spread-page'>  
 <h1>Programming API Demo</h1>  
 <p>This example demonstrates how to programme with <strong>GcExcel</strong> to generate a complete spreadsheet model at server side, you can find all of source code in the SpreadServicesController.cs, we use <strong>Spread.Sheets</strong> as client side viewer. </p> <ul>  
 <li>You can first program with <strong>GcExcel</strong> at server side.</li>  
 <li><strong>GcExcel<strong> then inoke <strong>ToJson</strong> and transport the ssjson to client side.</li>  
 <li>In browser, <strong>Spread.Sheets</strong> will invoke <strong>fromJSON</strong> with the ssjson from server.</li>  
 <li>Then, you can view the result in <strong>Spread.Sheets</strong> or download it as Excel file.</li>  
 </ul>  
 <br>  
 <div className='btn-group'>  
 <Select className='select'  
 name="form-field-name"  
 value={
    
    this.state.value}  
 options={
    
    this.state.options}  
 onChange={
    
    this.onUseCaseChange} >  
 <button className='btn btn-default btn-md' onClick={
    
    this.exportExcel}>Export Excel</button>  
 </div>  
 <div id='spreadjs' className='spread-div' />  
 </div>;  
}  

componentDidMount() {
    
      
 this.spread = new GC.Spread.Sheets.Workbook(**document**.getElementById('spreadjs'), {
    
      
 seetCount: 1  
 });  

 this.loadSpreadFromUseCase(this.state.value.value);  
}

3.Excel 入出力デモインターフェイス (ExcelIODemo.tsx):

public render() {
    
      
 return <div className='spread-page'>  
 <h1>Excel Input&Output Demo</h1>  
 <p>This example demonstrates how to use <strong>GcExcel</strong> as server-side spreadsheet model, and use <strong>Spread.Sheets</strong> as the front-end side viewer and editor. </p>  
 <ul>  
 <li><strong>GcExcel</strong> can import an Excel file and export to ssjson format, then transport the ssjson to client-side.</li>  
 </ul>  
 <br/>  
 <div className='btn-group'>  
 <input id="file" className='btn btn-default btn-md' type='file' onChange={
    
    this.importExcel} title='Import Excel' />  
 <button className='btn btn-default btn-md' onClick={
    
    this.exportExcel}>Export Excel</button>  
 </div>  
 <div id='spreadjs' className='spread-div' />  
 </div>;  
}  

*/**  
 * 在客户端上传一个Excel文件，在服务器端打开该文件，然后将ssjson传输到客户端  
 */  
*importExcel(e : any) {
    
      
 var selectedFile = e.target.files[0];  
 if (!selectedFile) {
    
      
 this.selectedFileName = null;  
 return;  
 }  

 this.selectedFileName = selectedFile.name;  
 var requestUrl = '/open';  
 fetch(requestUrl, {
    
      
 method: 'POST',  
 body: selectedFile  
 }).then(response => response.json() as Promise<object>)  
 .then(data => {
    
      
 this.spread.fromJSON(data);   
 });  
}  

*/**  
 * 从Spread.Sheets传输ssjson并保存和下载Excel文件  
 */  
*exportExcel(e : any) {
    
      
 var ssjson = **JSON**.stringify(this.spread.toJSON(null));  
 Utility.*ExportExcel*(ssjson, this.selectedFileName);  
}

バックエンドコード:

バックエンドコードはGCExcel (Java ベースのレポートプラグイン) を使用して実装されており、詳細なコードは次のとおりです。

バックエンドコード (SpringBoot) ファイルパス:

src:.

│

└─main

├─java

│ └─com

│ └─grapecity

│ └─documents

│ └─demo

│ │ Application.java

│ │

│ └─controller

│ GcExcelController.java

│

└─resources

│ application.properties

│

├─public

│ │ bundle.js

│ │ bundle.js.map

│ │ favicon-16x16.png

│ │ favicon-32x32.png

│ │ index.html

│ │

│ ├─css

│ │ site.css

│ │ site.css.map

│ │ vendor.css

│ │

│ └─spreadJS

│ │ gc.spread.sheets.all.11.0.6.min.js

│ │ gc.spread.sheets.Excel2013white.11.0.6.css

│ │ gc.spread.sheets.Excel2016colorful.11.0.6.css

│ │

│ └─pluggable

│ gc.spread.sheets.charts.11.0.6.min.js

│

└─static

└─error

404.html

**入札トラッカー (GcExcelController.java): **GcExcel のセル内ラベルを使用してテーブルのサイズを変更します。

Workbook workbook = new Workbook();  

IWorksheet worksheet = workbook.getWorksheets().get(0);  

//***********************Set RowHeight & ColumnWidth***************  
worksheet.setStandardHeight(30);  
worksheet.getRange("1:1").setRowHeight(57.75);  
worksheet.getRange("2:9").setRowHeight(30.25);  
worksheet.getRange("A:A").setColumnWidth(2.71);  
worksheet.getRange("B:B").setColumnWidth(11.71);  
worksheet.getRange("C:C").setColumnWidth(28);  

//**************************Set Table Value & Formulas*********************  
ITable table = worksheet.getTables().add(worksheet.getRange("B2:H9"), true);  
worksheet.getRange("B2:H9")  
 .setValue(new Object[][] {
    
     {
    
     "BID #", "DESCRIPTION", "DATE RECEIVED", "AMOUNT", "PERCENT COMPLETE", "DEADLINE", "DAYS LEFT" }, {
    
     1, "Bid number 1", null, 2000, 0.5, null, null },  
 {
    
     2, "Bid number 2", null, 3500, 0.25, null, null }, {
    
     3, "Bid number 3", null, 5000, 0.3, null, null }, {
    
     4, "Bid number 4", null, 4000, 0.2, null, null },;  
worksheet.getRange("B1").setValue("Bid Details");  
worksheet.getRange("D3").setFormula("=TODAY()-10");  
worksheet.getRange("D4:D5").setFormula("=TODAY()-20");  
//****************************Set Table   
ITableStyle tableStyle = workbook.getTableStyles().add("Bid Tracker");  
workbook.setDefaultTableStyle("Bid Tracker");

**To-do リスト (GcExcelController.java): ** GcExcel のsetValueメソッドは、テーブルのコンテンツに値を割り当てるために使用されます。

Workbook workbook = new Workbook();  

Object[] data = new Object[][] {
    
     {
    
     "TASK", "PRIORITY", "STATUS", "START DATE", "DUE DATE", "% COMPLETE", "DONE?", "NOTES" },  
 {
    
     "First Thing I Need To Do", "Normal", "Not Started", null, null, 0, null, null }, {
    
     "Other Thing I Need To Finish", "High", "In Progress", null, null, 0.5, null, null },  
 {
    
     "Something Else To Get Done", "Low", "Complete", null, null, 1, null, null }, {
    
     "More Errands And Things", "Normal", "In Progress", null, null, 0.75, null, null },  
 {
    
     "So Much To Get Done This Week", "High", "In Progress", null, null, 0.25, null, null } };  

IWorksheet worksheet = workbook.getWorksheets().get(0);  
worksheet.setName("To-Do List");  
worksheet.setTabColor(Color.*FromArgb*(148, 112, 135));  
worksheet.getSheetView().setDisplayGridlines(false);  

//Set Value.  
worksheet.getRange("B1").setValue("To-Do List");  
worksheet.getRange("B2:I7").setValue(data);  

//Set formula.  
worksheet.getRange("E3").setFormula("=TODAY()");  
worksheet.getRange("E4").setFormula("=TODAY()-30");

3. アドレス帳 (GcExcelController.java):

Workbook workbook = new Workbook();  

IWorksheet worksheet = workbook.getWorksheets().get(0);  

// ***************************Set RowHeight & Width****************************  
worksheet.setStandardHeight(30);  
worksheet.getRange("3:4").setRowHeight(30.25);  
worksheet.getRange("1:1").setRowHeight(103.50);  
worksheet.getRange("2:2").setRowHeight(38.25);  
worksheet.getRange("A:A").setColumnWidth(2.625);  
worksheet.getRange("B:B").setColumnWidth(22.25);  


// *******************************Set Table Value &  
// Formulas*************************************  
ITable table = worksheet.getTables().add(worksheet.getRange("B2:L4"), true);  
worksheet.getRange("B2:L4")  
 .setValue(new Object[][] {
    
     {
    
     "NAME", "WORK", "CELL", "HOME", "EMAIL", "BIRTHDAY", "ADDRESS", "CITY", "STATE", "ZIP", "NOTE" },  
 {
    
     "Kim Abercrombie", 1235550123, 1235550123, 1235550123, "[email protected]", null, "123 N. Maple", "Cherryville", "WA", 98031, "" },  
 {
    
     "John Smith", 3215550123L, "", "", "[email protected]", null, "456 E. Aspen", "", "", "", "" }, });  
worksheet.getRange("B1").setValue("ADDRESS BOOK");  
worksheet.getRange("G3").setFormula("=TODAY()");  
worksheet.getRange("G4").setFormula("=TODAY()+5");  

// ****************************Set Table Style********************************  
ITableStyle tableStyle = workbook.getTableStyles().add("Personal Address Book");  
workbook.setDefaultTableStyle("Personal Address Book");  

// Set WholeTable element style.  
// Set FirstColumn element style.  
tableStyle.getTableStyleElements().get(TableStyleElementType.*FirstColumn*).getFont().setBold(true);  

// Set SecondColumns element style.  
tableStyle.getTableStyleElements().get(TableStyleElementType.*HeaderRow*).getBorders().setColor(Color.*FromArgb*(179, 35, 23));  
tableStyle.getTableStyleElements().get(TableStyleElementType.*HeaderRow*).getBorders().get(BordersIndex.*EdgeTop*).setLineStyle(BorderLineStyle.*Thick*);  
tableStyle.getTableStyleElements().get(TableStyleElementType.*HeaderRow*).getBorders().get(BordersIndex.*EdgeBottom*).setLineStyle(BorderLineStyle.*Thick*);