前言

Blazor 是一个相对较新的框架，用于构建具有 .NET 强大功能的交互式客户端 Web UI。一个常见的用例是将现有的 Excel 文件导入 Blazor 应用程序，将电子表格数据呈现给用户，并且能够允许进行任何更改，最后将该数据导出回 Excel 文件或将其保存到数据库。

以下是在 Blazor 中导入/导出电子表格文件的步骤：

创建 SpreadJS Blazor 组件
创建 Blazor 应用程序
在 Blazor 应用程序中导入 Excel
Blazor 应用程序中的 Excel 导出

创建 SpreadJS Blazor 组件

SpreadJS 是一个非常强大且可扩展的 JavaScript 电子表格组件，它使这个过程变得更加简单。

在将 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 导入导出。

如何使用 Blazor 框架在前端浏览器中导入和导出 Excel的更多相关文章

Java中导入、导出Excel
原文:Java中导入.导出Excel 一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已 ...
我是陌生人 Java中导入、导出Excel
我是陌生人 Java中导入.导出Excel 一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是: ...
[转]Java中导入、导出Excel
原文地址:http://blog.csdn.net/jerehedu/article/details/45195359 一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样 ...
C#中导入和导出Excel的方法
using System.Data; using System.Data.OleDb; /// <summary> /// Excel转为DataTable /// </summar ...
前端必读3.0：如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
在之前的文章中,我们为大家分别详细介绍了在JavaScript.React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的"三部曲",本文我们将为大家 ...
Java中使用poi导入、导出Excel
一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际 ...
两个不同的账户登录两个浏览器，导入同样的excel表格。数据出现重复
1.场景: 两个不同的账户登录两个浏览器,导入同样的excel表格.业务逻辑已经有验重校验,但数据仍然出现重复,锁定是并发问题导致. 2.参考博客: https://cloud.tencent.com ...
如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
前端必读：如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件
JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它.技术圈有一句很经典的话"凡是能用JavaScript实现的 ...
Yii框架中使用PHPExcel导出Excel文件
最近在研究PHP的Yii框架,很喜欢,碰到导出Excel的问题,研究了一下,就有了下面的方法: 1.首先在config\main.php中添加对PHPExcel的引用,我的方式是这样: 1 2 3 4 ...

随机推荐

Python--基本知识认知及应用
字面量概念:被写下来的固定的值(既包括print里面的值,也包括直接写到编程页面的值) 在Python中,常用的有六种值的类型:数字.字符串.列表.元组.集合以及字典: Python中,被双引号包围 ...
基于Pierre Dellacherie的俄罗斯方块-05Pierre Dellacherie算法
基于Pierre Dellacherie的俄罗斯方块-05Pierre Dellacherie算法 Pierre Dellacherie算法感觉上像是一个遍历算法,给与各个参数不同的权重,使得更加合理 ...
【读书笔记】排列研究-置换角度(分解为Products Of Cycles) 含GroupExploer使用
upd 2020-08-06 23:11完成了最初稿目录定义开胃菜 entrée 群论角度应用:几何变换当然要从第一类斯特林数的角度来考虑一下一个排列的type定义排旗公式应用-共轭排 ...
太坑了，我竟然从RocketMQ源码中扒出了7种导致消息重复消费的原因
大家好,我是三友~~ 在众多关于MQ的面试八股文中有这么一道题,"如何保证MQ消息消费的幂等性". 为什么需要保证幂等性呢?是因为消息会重复消费. 为什么消息会重复消费? 明明已经 ...
Java 泛型与通配符定义与使用
一.泛型定义: 把类型明确的工作推迟到创建对象或调用方法时才明确的类型,简而言之,未明确的数据类型. 类型: 泛型类,泛型方法,方形接口. 格式泛型类格式:class 类名<E变量>{ ...
【深入浅出 Yarn 架构与实现】5-2 Yarn 三种调度器
本篇文章将深入介绍 Yarn 三种调度器.Yarn 本身作为资源管理和调度服务,其中的资源调度模块更是重中之重.下面将介绍 Yarn 中实现的调度器功能,以及内部执行逻辑. 一.简介 Yarn 最主要 ...
JVM加载中初始化时机？什么时候不会进行初始化？
初始化的过程是给静态变量赋予指定值以及执行静态代码块的过程. 当遇到new,getstatic,putstatic,invokestatic指令时要进行初始化,也就是new实例化对象,调用静态变量以及 ...
Go语言：通过TDD驱动测试开发为同事写的程序优化提速——初次接触并发与channel
正文: 假如同事已经写了一个 CheckWebsites 的函数检查 URL 列表的状态. package concurrency type WebsiteChecker func(string) b ...
ASP.NET Core - 选项系统之选项验证
就像 Web Api 接口可以对入参进行验证,避免用户传入非法的或者不符合我们预期的参数一样,选项也可以对配置源的内容进行验证,避免配置中的值与选项类中的属性不对应或者不满足预期,毕竟大部分配置都 ...
crontab使用说明【一文搞懂Linux定时任务Crontab】
1.简介 cron是一个在后台运行调度的守护进程,而crontab是一个设置cron的工具.cron调度的是/etc/crontab文件. 2.centos安装crontab yum install ...

如何使用 Blazor 框架在前端浏览器中导入和导出 Excel