在上篇文章中介紹了，如何在Svelte架構中使用SpreadJS完成填報功能。這次我們來看看，如何實作類Excel報表設計吧。首先看下在svelte架構中如何引入Designer元件。
1、在pageage.json檔案中引入相關designer資源
"devDependencies": {
"svelte": "^3.52.0",
"vite": "^3.2.3",
"@grapecity/spread-excelio": "15.2.5",
"@grapecity/spread-sheets": "15.2.5",
"@grapecity/spread-sheets-barcode": "15.2.5",
"@grapecity/spread-sheets-charts": "15.2.5",
"@grapecity/spread-sheets-designer": "15.2.5",
"@grapecity/spread-sheets-designer-resources-cn": "15.2.5",
"@grapecity/spread-sheets-languagepackages": "15.2.5",
"@grapecity/spread-sheets-pdf": "15.2.5",
"@grapecity/spread-sheets-pivot-addon": "15.2.5",
"@grapecity/spread-sheets-pivots": "^14.0.0",
"@grapecity/spread-sheets-print": "15.2.5",
"@grapecity/spread-sheets-resources-zh": "15.2.5",
"@grapecity/spread-sheets-shapes": "15.2.5",
"@grapecity/spread-sheets-tablesheet": "15.2.5",
"file-saver": "^2.0.5"
} 2、接着我們在lib檔案夾下建立Designer.svelte，在此檔案中建立Designer的目标DOM元素：
<div id="designerHost" class="designer-host"></div> 3、接着為此容器設定寬高,以及引入css資源
<style scoped>
@import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
@import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
.designer-host {
width: 100%;
height: 100Vh;
}
</style> 4、接着引入js相關資源
<script>
import {onMount} from 'svelte';
//列印相關資源
import '@grapecity/spread-sheets-print';
//圖表相關資源
import "@grapecity/spread-sheets-charts";
//形狀、圖檔相關資源
import '@grapecity/spread-sheets-shapes';
//資料透視表相關資源(按需引入)
import '@grapecity/spread-sheets-pivot-addon';
//集算表相關資源(按需引入)
import '@grapecity/spread-sheets-tablesheet';
import '@grapecity/spread-sheets-designer-resources-cn';
import '@grapecity/spread-sheets-designer';
import * as GC from '@grapecity/spread-sheets';
import * as GCDesigner from '@grapecity/spread-sheets-designer';
</script> 5、最後在omMount生命周期鈎子函數中，初始化Designer容器，并設定資料，添加圖表
<script>
let designer = null;
onMount(async () => {
designer = new GCDesigner.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
let spread = designer.getWorkbook();
let sheet = spread.getActiveSheet();
//設定列寬
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(4, 100);
// 建立資料數組
var dataArray =
[
['Region', 'Subregion', 'country', 'Population'],
['Asia', 'Southern', 'India', 1354051854],
[, , 'Pakistan', 200813818],
[, , 'Bangladesh', 166368149],
[, , 'Others', 170220300],
[, 'Eastern', 'China', 1415045928],
[, , 'Japan', 127185332],
[, , 'Others', 111652273],
[, 'South-Eastern', , 655636576],
[, 'Western', , 272298399],
[, 'Central', , 71860465],
['Africa', 'Eastern', , 433643132],
[, 'Western', , 381980688],
[, 'Northern', , 237784677],
[, 'Others', , 234512021],
['Europe', , , 742648010],
['Others', , , 1057117703]
];
// 設定數組
sheet.setArray(1, 1, dataArray);
sheet.charts.add('chart1',
GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
});
</script> 6、完成Designer.svelte檔案的編輯後，在app.svelte檔案中進行引入。最後實作效果如下：
從上圖中可以看出，設計器Designer元件包括功能區、公式欄、狀态欄、側面闆和上下文菜單。通過這些功能，可線上/離線設計報表模闆、編輯、計算、分析資料并與資料庫綁定，滿足填報系統開發需求。
介紹完在svelte架構中初始化designer元件及建立圖表相關功能後，接下來介紹下什麼是類Excel報表設計以及如何實作在svelte架構實作類Excel線上報表設計。
使用類 Excel 模式設計各類報表，既可以保留使用者的使用習慣，又可以輕松實作資料從本地到線上的平滑遷移。通過嵌入 SpreadJS 純前端表格控件，企業可迅速搭建出一系列符合 Excel 使用習慣、功能布局高度類似 Excel 、可直接讀寫 Excel 文檔的資訊系統，充分滿足企業各類複雜報表的設計需求，進一步提高企業資料管理效率。
下文通過在Designer中設計模闆，綁定字段，綁定資料，導出excel等功能為例來介紹如何線上報表設計。
1、設計模闆
通過菜單欄标題進行設計：對A1到E3區域單元格合并，并設定居中，設定字型為楷體18号；設定頁眉字型為11号字型。同時Designer元件還支援表單設計，如複選框，單選框，下拉框，日期選擇等。
結果如下圖所示：
2、綁定字段
設計模闆後，就可以進行綁定字段了。在”資料“頁簽中，選擇工作表綁定，出現字段清單這個側邊欄，然後右鍵，然後滑鼠懸浮在Source根字段附件，出現“+”圖示，此時點選“+”,新增字段或者table，最後設計的字段清單如下圖所示：
設計字段清單後，可以通過拖拽方式放入指定位置：
如下圖所示：
至此建議模闆及字段綁定工作就完成了。
3、資料綁定
資料綁定有兩種方式：
第一種是将目前設計好的模闆與字段清單儲存為json檔案，在後端GcExcel中進行解析，并且填充資料。
第二種方在前端調用一個http請求，擷取傳回資料後，進行setDataSource()操作。
此兩種方式都需要在菜單欄中添加一個按鈕，讓使用者可以點選操作
下面先介紹下如何自定義菜單欄。介紹之後再分别介紹下如何實作這兩種資料綁定。
var config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
config.commandMap = {
BindData: {
title: "BindData data to server",
text: "資料綁定",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "BindData",
execute: async (context, propertyName, fontItalicChecked) => {},
},
"Save": {
iconClass: "ribbon-button-download",
text: "儲存",
commandName: "save",
execute: async function (context, propertyName) {},
}
};
config.ribbon[0].buttonGroups[0] = {
thumbnailClass: "save",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["BindData","Save"],
}
],
},
};
designer.setConfig(config) 通過上述代碼就可以實作在菜單欄實作兩個簡易按鈕。
實作按鈕之後，可以重寫execute方法。
上面講到的第一種方法是将目前Spread與字段清單合并為同一個json ,然後發送給後端，GcExcel接收json資料，
前端代碼為：
execute: async (context, propertyName, fontItalicChecked) => {
let spread = context.Spread;
let formData = new FormData();
let json = spread.toJSON({
includeBindingSource: true
})
var designerBindingPathSchema = designer.getData("treeNodeFromJson") || designer.getData("updatedTreeNode") || designer.getData("oldTreeNodeFromJson");
json.schema = designerBindingPathSchema
formData.append('json',JSON.stringify(json))
$.ajax({
type: "post",
url: "http://localhost:8080/excel",
data: formData,
processData: false, //必須
contentType: false, //必須
success: function (data) {
console.log(data)
spread.fromJSON(JSON.parse(data))
},
error: function () {
alert("請求失敗");
}
});
}, 後端代碼為：
@PostMapping (value = "/excel")
@CrossOrigin
public String greeting(@RequestParam(name="json") String json, Model model) {
Workbook workbook = new Workbook();
System.out.print(json.toString());
workbook.fromJson(json);
StationInfo stationInfo = new StationInfo();
stationInfo.name = "實驗站";
stationInfo.date = String.valueOf(new Date());
stationInfo.rainFalls = new ArrayList<RainFall>();
RainFall rainFall = new RainFall();
rainFall.time = "03:12";
rainFall.precipitation = "21.23";
rainFall.rain = "0.23";
rainFall.record_person = "李四";
rainFall.remark = "";
stationInfo.rainFalls.add(rainFall);
IWorksheet worksheet = workbook.getWorksheets().get(0);
worksheet.setDataSource(stationInfo);
workbook.save("json/test.pdf");
workbook.save("json/test.xlsx");
String jsonWithOption = workbook.toJson();
return jsonWithOption;
} 後端将處理号的json傳回給前端，前端fromJSON就可以看到相關資料啦。
接下來介紹下第二種方式，第二種方式較為簡單，第一種方式适用于大資料量及大量公式的場景，在後端處理資料可以大大提升性能。第二種方法在前端發送一個http請求，接收後端傳回的資料，然後setDataSource()即可。
4、導入導出
最後介紹下designer的導入導出功能，designer支援導入ssjson檔案、excel檔案、csv檔案；支援導出ssjson檔案、excel檔案、csv檔案、pdf檔案。滿足各種導入導出場景。
以上就是使用Svelte架構結合SpreadJS實作純前端類Excel線上報表設計的全部内容啦，其實關于線上報表設計還有超級多的功能等待大家去發現，歡迎大家搜尋并通路葡萄城官網，快來體驗一下吧。