前言

Blazor 是一個相對較新的架構，用于建構具有 .NET 強大功能的互動式用戶端 Web UI。一個常見的用例是将現有的 Excel 檔案導入 Blazor 應用程式，将電子表格資料呈現給使用者，并且能夠允許進行任何更改，最後将該資料導出回 Excel 檔案或将其儲存到資料庫。SpreadJS 是一個非常強大且可擴充的 JavaScript 電子表格元件，它使這個過程變得更加簡單。

以下是在 Blazor 中導入/導出電子表格檔案的步驟：

建立 SpreadJS Blazor 元件
建立 Blazor 應用程式
在 Blazor 應用程式中導入 Excel
Blazor 應用程式中的 Excel 導出

建立 SpreadJS Blazor 元件

在将 SpreadJS 放入 Blazor 應用程式之前，我們必須首先建立一個 Blazor 元件來包含 SpreadJS。

在本教程中，我們将使用 Visual Studio 2022 和 SpreadJS V16.0。

要建立元件，首先要建立一個 Razor 類庫：

為簡單起見，您可以将其命名為“SpreadJS_Blazor_Lib”：

建立項目後，我們需要将 SpreadJS 檔案複制到“wwwroot”檔案夾：

建立這個項目還應該建立一個名為“exampleJSInterop.js”的檔案，是以我們需要對其進行編輯以添加有助于将 C# 代碼連接配接到 SpreadJS 的 JavaScript 代碼的邏輯：

// This file is to show how a library package may provide JavaScript interop features
// wrapped in a .NET API
window.sjsAdaptor = {
    init: function (host, config) {
        if (config.hostStyle) {
            var hostStyle = config.hostStyle;
            var styles = hostStyle.split(';');
            styles.forEach((styleStr) => {
                var style = styleStr.split(':');
                host.style[style[0]] = style[1];
            });
            delete config.hostStyle;
        }
        return new GC.Spread.Sheets.Workbook(host, config);
    },
    setValue: function (host, sheetIndex, row, col, value) {
        var spread = GC.Spread.Sheets.findControl(host);
        if (spread) {
            var sheet = spread.getSheet(sheetIndex);
            sheet.setValue(row, col, value);
        }
    },
    openExcel: function (host, inputFile) {
        var spread = GC.Spread.Sheets.findControl(host);
        if (spread) {
            var excelIO = new GC.Spread.Excel.IO();
            excelIO.open(inputFile.files[0], function (json) {
                spread.fromJSON(json);
            })
        }
    }
};

該應用程式還應該建立一個預設的“Component1.razor”檔案，我們可以将其重命名為“SpreadJS.razor”。這将是我們将用作包裝器的元件：

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime
<div @ref="host"></div>
@code {
    [Parameter]
    public int SheetCount { get; set; }
    [Parameter]
    public string HostStyle { get; set; }
    private ElementReference host;
    public void setValue(int sheetIndex, int row, int col, object value)
    {
        JSRuntime.InvokeVoidAsync("sjsAdaptor.setValue", host, sheetIndex, row, col, value);
    }
    public void OpenExcel(ElementReference inputFile)
    {
        JSRuntime.InvokeVoidAsync("sjsAdaptor.openExcel", host, inputFile);
    }
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            JSRuntime.InvokeVoidAsync("sjsAdaptor.init", host, new Dictionary<string, object>() {
                { "sheetCount", SheetCount},
                { "hostStyle", HostStyle }
            });
        }
    }
}

使用 SpreadJS 建立 Blazor 應用程式

現在我們已經使用 SpreadJS 建立了一個元件，我們可以在 Blazor 應用程式中使用它。首先，我們可以使用“Blazor WebAssemblyApp”模闆添加一個新項目：

要添加 SpreadJS 元件，我們需要在解決方案資料總管中右鍵單擊這個新項目的依賴項，然後單擊“添加項目引用”。我們的 SpreadJS_Blazor_Lib 應該列為選項之一：

在這個新項目中，應該有一個頁面檔案夾，其中包含幾個不同的 razor 檔案。在此，我們将要編輯 Index.razor 檔案以設定 HTML 的代碼隐藏：

@page "/"
@using SpreadJS_Blazor_Lib
<h1>Hello, SpreadJS!</h1>
<SpreadJS SheetCount="3" HostStyle="@HostStyle" />
@code {
    private string HostStyle { get; set; } = "width:90wh;height:70vh;border: 1px solid darkgray";
}

現在我們可以編輯“wwwroot”檔案夾中的index.html檔案。在這個檔案中，我們可以添加對 SpreadJS JavaScript 和 CSS 檔案的引用：

(index.html)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />

    <link href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.16.0.5.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.16.0.5.min.js"></script>
    <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.16.0.5.min.js"></script>
    <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.16.0.5.min.js"></script>
    <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.slicers.16.0.5.min.js"></script>
    <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.print.16.0.5.min.js"></script>
    <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.barcode.16.0.5.min.js"></script>
    <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.pdf.16.0.5.min.js"></script>
    <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.tablesheet.16.0.5.min.js"></script>
    <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.16.0.5.min.js"></script>
    <script src="_content/SJS_Blazor_Lib/exampleJsInterop.js" type="text/javascript"></script>
</head>
<body>
    <app>Loading...</app>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">??</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

我們還可以在“Pages”檔案夾下編輯 Index.razor 中的代碼：

(Index.razor)
@page "/"
@using SJS_Blazor_Lib
<h1>Hello, SpreadJS!</h1>
<table>
    <tr>
        <td>
            <label>Sheet Index</label>
            <input @bind-value="@SheetIndex" />
        </td>
        <td>
            <label>Row Index</label>
            <input @bind-value="@Row" />
        </td>
        <td>
            <label>Column Index</label>
            <input @bind-value="@Column" />
        </td>
        <td>
            <lable>Value</lable>
            <input @bind-value="@Value" />
        </td>
    </tr>
    <tr>
        <td>
            <button @onclick="doSomething">Update Text</button>
        </td>
    </tr>
    <tr>
        <td>
            <input type="file" @ref="inputFileEle" />
        </td>
        <td>
            <button @onclick="ImportExcel">Import File</button>
        </td>
    </tr>
</table>
<br />
<SpreadJS SheetCount="3" HostStyle="@HostStyle" @ref="ss" />
@code {
    private SpreadJS ss;
    private ElementReference inputFileEle;
    public int SheetIndex { get; set; } = 0;
    public int Row { get; set; } = 0;
    public int Column { get; set; } = 0;
    public string Value { get; set; } = "";
    private string HostStyle { get; set; } = "width:90wh;height:70vh;border: 1px solid darkgray";
    private void doSomething()
    {
        ss.setValue(SheetIndex, Row, Column, Value);
    }
    private void ImportExcel()
    {
        ss.OpenExcel(inputFileEle);
    }
}

這就是在 Blazor 應用程式中運作 SpreadJS 所需的全部内容：

Blazor Excel 導入

前面的代碼隻是 SpreadJS 在 Blazor 應用程式中的基本用法，但我們可以通過包含一些 Excel 導入功能來添加它。借助 SpreadJS 的強大功能，您可以在 Blazor 應用程式中導入自己的 Excel 檔案。實作類似于基本的 SpreadJS Blazor 代碼，但我們需要編輯 Index.razor 檔案以添加一些用于設定值和打開 Excel 檔案的代碼：

@page "/"
@using SpreadJS_Blazor_Lib
<h1>Hello, SpreadJS!</h1>
<table>
    <tr>
        <td>
            <label>Sheet Index</label>
            <input @bind-value="@SheetIndex" />
        </td>
        <td>
            <label>Row Index</label>
            <input @bind-value="@Row" />
        </td>
        <td>
            <label>Column Index</label>
            <input @bind-value="@Column" />
        </td>
        <td>
            <lable>Value</lable>
            <input @bind-value="@Value" />
        </td>
    </tr>
    <tr>
        <td>
            <button @onclick="doSomething">Update Text</button>
        </td>
    </tr>
    <tr>
        <td>
            <input type="file" @ref="inputFileEle" @onchange="ImportExcel" />
        </td>
    </tr>
</table>
<br />
<SpreadJS SheetCount="3" HostStyle="@HostStyle" @ref="ss" />
@code {
    private SpreadJS ss;
    private ElementReference inputFileEle;
    public int SheetIndex { get; set; } = 0;
    public int Row { get; set; } = 0;
    public int Column { get; set; } = 0;
    public string Value { get; set; } = "";
    private string HostStyle { get; set; } = "width:90wh;height:70vh;border: 1px solid darkgray";
    private void doSomething()
    {
        ss.setValue(SheetIndex, Row, Column, Value);
    }
    private void ImportExcel()
    {
        ss.OpenExcel(inputFileEle);
    }
}

一旦我們在 Index.razor 中有了該代碼，它應該可以導入，因為我們已經在前面的步驟中為 SpreadJS_Blazor_Lib 項目中的 SpreadJS.razor 和 exampleJsInterop.js 檔案添加了代碼。

Blazor Excel 導出

此外，我們還可以添加導出Excel檔案的功能。為此，我們需要将代碼添加到 exampleJsInterop.js 檔案中：

window.sjsAdaptor = {
    (....)
    saveExcel: function (host) {
        var spread = GC.Spread.Sheets.findControl(host);
        if (spread) {
            var json = spread.toJSON();
            var excelIO = new GC.Spread.Excel.IO();
            excelIO.save(json, function (blob) {
                saveAs(blob, "export.xlsx");
            }, function (e) {
                console.log(e);
            });
        }
    }
};

為了使“另存為”功能起作用，我們還需要在 index.html 檔案中添加對 FileSaver 庫的引用：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>

要讓此代碼在頁面上運作，我們需要将用于導出的按鈕添加到 Index.razor 代碼中：

@page "/"
@using SpreadJS_Blazor_Lib
<h1>Hello, SpreadJS!</h1>
<table>
    (....)
   
        <td>
            <button @onclick="ExportExcel">Export File</button>
        </td>
    </tr>
</table>
<br />
<SpreadJS SheetCount="3" HostStyle="@HostStyle" @ref="ss" />
@code {
    (....)
    private void ExportExcel()
    {
        ss.SaveExcel();
    }
}

“ss.SaveExcel()”調用使用 SpreadJS.razor 檔案中的代碼，是以我們需要確定在其中添加指向 exampleJsInterop.js 檔案中正确函數的代碼：

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime
<div @ref="host"></div>
@code {
   
    (....)
    public void SaveExcel()
    {
        JSRuntime.InvokeVoidAsync("sjsAdaptor.saveExcel", host);
    }
    (....)
}

此文章展示了如何在 Blazor 應用程式中實作 SpreadJS 利用 .NET 的強大功能完成浏覽器端的 Excel 導入導出。要嘗試該功能或檢視 SpreadJS 的其他驚人功能，可前往葡萄城官網立即下載下傳試用版。

了解更多資訊，歡迎私信我們，或者發送産品關鍵詞“SpreadJS”。

如何使用 Blazor 架構在前端浏覽器中導入和導出 Excel

前言

建立 SpreadJS Blazor 元件

使用 SpreadJS 建立 Blazor 應用程式

Blazor Excel 導入

Blazor Excel 導出

繼續閱讀

SQL表中資料按條件批量導出多個Excel檔案

如何使用Transformer模型實作語言分類任務

GlobalMapper20如何導入文本類（txt，csv，excel）的坐标資料序：一、如何導入離散的坐标點二、離散的坐标點如何生産互相連接配接的線三、離散的坐标點如何生成範圍面

php源碼安裝，如何使用源碼的方式安裝PHP環境

如何增值你的文檔資産?_

線上轉換pdf和虛拟列印機生成pdf檔案操作攻略

如何在Word中輸入英語音标

VBA實用代碼拾零

vba excel程式設計三日談(1)

EXCEL VBA筆記

使用ffmpeg進行視訊檔案轉換成FLV整理

檔案資料總管右鍵開檔案夾_如何在Windows的檔案資料總管中設定自定義啟動檔案夾...

利用javascript和jxl實作自定義報表的輸出

Excel多行轉多列

Excel如何将小寫轉大寫金額

個項目的開發過程及成員組成