百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

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

liuian 2024-12-26 15:05 38 浏览

前言

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

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

  1. 创建 SpreadJS Blazor 组件
  2. 创建 Blazor 应用程序
  3. 在 Blazor 应用程序中导入 Excel
  4. 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”。

相关推荐

赶紧收藏!编程python基础知识，本文给你全部整理好了

想一起学习编程Python的同学，趁我粉丝少，可以留言、私信领编程资料~Python基础入门既然学习Python，那么至少得了解下这门编程语言，知道Python代码执行过程吧。Python的历...

创建绩效改进计划 (PIP) 的6个步骤

每个经理都必须与未能达到期望的员工抗衡，也许他们的表现下降了，他们被分配了新的任务并且无法处理它们，或者他们处理了自己的任务，但他们的行为对他人造成了破坏。许多公司转向警告系统，然后在这些情况下终止。...

PI3K/AKT信号通路全解析:核心分子、上游激活与下游效应分子

PI3K/AKT/mTOR（PAM）信号通路是真核细胞中高度保守的信号转导网络，作用于促进细胞存活、生长和细胞周期进程。PAM轴上生长因子向转录因子的信号传导受到与其他多条信号通路的多重交叉相互作用的...

互联网公司要求签PIP，裁员连N+1都没了?

2021年刚画上句号，令无数互联网公司从业者闻风丧胆的绩效公布时间就到了，脉脉上已然炸了锅。阿里3.25、腾讯二星、百度四挡、美团绩效C，虽然名称五花八门，实际上都代表了差绩效。拿到差绩效，非但不能晋...

Python自动化办公应用学习笔记3—— pip工具安装

3.1pip工具安装最常用且最高效的Python第三方库安装方式是采用pip工具安装。pip是Python包管理工具，提供了对Python包的查找、下载、安装、卸载的功能。pip是Python官方提...

单片机都是相通的_单片机是串行还是并行

作为一个七年的从业者，单片机对于我个人而言它是一种可编程的器件，现在长见到的电子产品中几乎都有单片机的身影，它们是以单片机为核心，根据不同的功能需求，搭建不同的电路，从8位的单片机到32位的单片机，甚...

STM32F0单片机快速入门八 聊聊 Coolie DMA

1.苦力DMA世上本没有路，走的人多了，便成了路。世上本没有DMA，需要搬运的数据多了，便有了DMA。大多数同学应该没有在项目中用过这个东西，因为一般情况下也真不需要这个东西。在早期的单片机中...

放弃51单片机，直接学习STM32开发可能会面临的问题

学习51单片机并非仅仅是为了学习51本身，而是通过它学习一种方法，即如何仅仅依靠Datasheet和例程来学习一种新的芯片。51单片机相对较简单，是这个过程中最容易上手的选择，而AVR单片机则更为复杂...

STM32串口通信基本原理_stm32串口原理图

通信接口背景知识设备之间通信的方式一般情况下，设备之间的通信方式可以分成并行通信和串行通信两种。并行与串行通信的区别如下表所示。串行通信的分类1、按照数据传送方向，分为：单工：数据传输只支持数据在一个...

单片机的程序有多大?_单片机的程序有多大内存

之前一直很奇怪一个问题，每次写好单片机程序之后，用烧录软件进行烧录时，能看到烧录文件也就是hex的文件大小：我用的单片机芯片是STM32F103C8T6，程序储存器（flash）只有64K。从...

解析STM32单片机定时器编码器模式及其应用场景

本文将对STM32单片机定时器编码器模式进行详细解析，包括介绍不同的编码器模式、各自的优缺点以及相同点和不同点的应用场景。通过阅读本文，读者将对STM32单片机定时器编码器模式有全面的了解。一、引言...

两STM32单片机串口通讯实验_两个32单片机间串口通信

一、实验思路连接两个STM32单片机的串口引脚，单片机A进行发送，单片机B进行接收。单片机B根据接收到单片机A的指令来点亮或熄灭板载LED灯，通过实验现象来验证是否通讯成功。二、实验器材两套STM32...

基于单片机的智能考勤机设计_基于51单片机的指纹考勤机

一、设计背景随着科技水平的不断发展，在这么一个信息化的时代，智能化信息处理已是提高效率、规范管理和客观审查的最有效途径。近几年来，国内很多公司都在加强对企业人员的管理，考勤作为企业的基础管理，是公司...

STM32单片机详细教学(二):STM32系列单片机的介绍

大家好，今天给大家介绍STM32系列单片机，文章末尾附有本毕业设计的论文和源码的获取方式，可进群免费领取。前言STM32系列芯片是为要求高性能、低成本、低功耗的嵌入式应用设计的ARMCortexM...

STM32单片机的 Hard-Fault 硬件错误问题追踪与分析

有过单片机开发经验的人应该都会遇到过硬件错误（Hard-Fault）的问题，对于这样的问题，有些问题比较容易查找，有些就查找起来很麻烦，甚至可能很久都找不到问题到底是出在哪里。特别是有时候出现一次，后...

一周热门
最近发表
标签列表