如何使用 Blazor 框架在前端浏览器中导入和导出 Excel
liuian 2024-12-26 15:05 57 浏览
前言
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”。
相关推荐
- 扫描仪怎么安装（信鸽扫描仪怎么安装）
-
扫描仪的安装步骤可能会略有不同，具体取决于您所使用的扫描仪品牌和型号。一般而言，您可以按照以下基本步骤来安装扫描仪：确认您的计算机系统符合扫描仪的最低系统要求。在计算机上插入扫描仪的安装光盘，或从制造...
- u盘怎么启动重装系统（u盘启动重装系统哪个好）
-
1.下载好系统之家U盘以后在电脑上插入U盘并打开软件，软件会自，动配置用户的电脑信息，点击制作U盘启动盘。2.接着就进入了选择系统的界面，在这里选择需要安装的系统版本，然后点击开始制作。3.弹出提示窗...
- photoshopcs6哪一年的（pscs6版本好用吗）
-
pscs6的发行时间是2012年4月24日，该软件是是AdobePhotoshop的第13代，具有多种功能，包括内容识别修补、Mercury图形引擎/3D性能提升/3D控制功能/改良的设计工具/全新的...
- 电脑如何设置自动关机win10（win10系统电脑怎么设置自动关机）
-
windows10自动关机设置方法如下1、打开电脑管家主界面，点击右下角的“工具箱”;2、在工具箱的其他分类中选择打开“健康小助手”;3、健康小助手中有三项功能，护眼配色、定时休息和定时关机，点击定时...
- wan口未连接是欠费吗（wan口未连接是怎么回事）
-
网费欠费了路由器WAN指示灯常亮不闪烁，一个灯亮。路由器正常工作的话，电源指示灯是常亮状态，SYS系统指示灯和WAN指示灯会闪亮，尤其是WAN指示灯的状态有些复杂：如果WAN指示灯不亮，说明网络连接有...
- 如何用手机修复sd卡（如何用手机修复sd卡受损）
-
第一步：将要修复的内存卡，用读卡器连接到电脑上，然后下载失易得数据恢复软件。 第二步：运行软件，选择要恢复的“u盘/储存卡”功能。注：在恢复数据之...
- 惠普台式机bios设置（惠普台式机bios设置核显内存）
-
1、按电源键启动电脑，在屏幕刚亮时，不停点击F10按键，就可以进入BIOS界面；2、如果F10没反应，则在启动时不停点击ESC键；3、这个时候会进入到启动菜单选项，F10BIOSSetup就是BI...
- 搜狗输入法不见了怎么调出来
-
因为在设置里勾选了智能ABC风格，所以他会像智能ABC一样，按空格才会显示。右键点击搜狗皮肤，设置属性，勾选搜狗风格就好了。注意，当你勾选智能ABC风格的时候会自动勾选“按空格出字”。使用【ctrl...
- 类似系统的黑科技网吧（系统的黑科技网吧好看吗）
-
如果机器配置和装修都不追求高档的话应该差不多只要不是全部追求顶配基本上可以
- 输入法哪个好用占内存又小（哪种输入法占内存小）
-
最不占内存的是系统自带的输入法，不过只适合win8用户，对于win7和xp用户推荐qq输入法，不推荐搜狗（1，安装包就可以看出占用系统大小，2，各种后台运行，3，各种广告提醒），除了qq推荐谷歌输入法...
- 2025组装机推荐配置（21年装机配置）
-
1.CPU：Intel酷睿i5-10400F；2.主板：华硕H410M-K；3.内存：金士顿16GBDDR42666MHz；4.硬盘：希捷Barracuda1TB7200转；5.显卡...
-
- 怎么恢复已经删除的人（怎么恢复已经删了的好友）
-
我们总是把美好的人和事进行拍照留念，手机相册中的照片越来越多，占用的空间也随之越来越大，如果在定期清理照片时误删了重要的照片，又该通过什么办法找回来呢?一、从手机最近删除中恢复手机照片删除之后，有两种方法可以找回，第一种就是手机自带的恢复功...
-
2026-01-01 21:55 liuian
- 三星手机系统下载（三星手机新版本下载）
-
三星手机下载系统有几种方法，其中最常见的方法是通过手机的设置菜单来下载系统更新。用户可以进入手机的设置菜单，找到“关于手机”或“软件更新”选项，然后点击“检查更新”来查看是否有可用的系统更新。如果有更...
- 安装系统要在u盘下载什么（安装系统对u盘要求）
-
、U盘装系统分两种，一种是pe启动盘，一种是使用制作工具直接将系统刻录到U盘2、系统镜像也分很多种，ghost系统镜像有iso和gho两种，原版系统镜像有iso和wim两种3、如果是大白菜pe启动...
- 原版win7家庭版（win7家庭版怎么样）
-
同配置下的流畅度Win7家庭普通版》家庭高级版》专业版》旗舰版各版本的的功能存在差异，功能越少运行越流畅，因为后台进程较少。办公的话建议专业版起步，游戏的话就无所谓了。网上有一些精简版，跑起来贼流畅...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)