BlazorWebAssembly(フレームワーク.Net Standard2.1)でClosedXMLのオープンに失敗

Question

前提

BlazorWebAssembly(フレームワーク.Net Standard2.1)で実現したい
ClosedXML Version="0.97.0" インストール済

実現したいこと

BlazorWebAssembly(フレームワーク.Net Standard2.1)でExcelファイルを読み込みたい

発生している問題・エラーメッセージ

特にブレークポイントも効かず、ブラウザーにエラーが発生しましたとなる

該当のソースコード

        var ExcelFilePath = @"C:\test\testExl.xlsx";
        // Excelファイルを開く
        using (var workbook = new XLWorkbook(ExcelFilePath))
        {
            // ワークシートを取得する
            var worksheet = workbook.Worksheet("Sheet1");
            // 位置を指定してセルを取得する
            var cellA1 = worksheet.Cell(1, 1); 
            var cellB1 = worksheet.Cell(1, 2); 
        }

試したこと

JavaScrip側でファイル選択したファイルをクライアント側(.Net Standard)からサーバー側(.Net Core3.1)へアップロードし、サーバー側でExcel処理する方針を試しました。
ファイルをサーバーへアップロードする方法が分からず断念。

補足情報（FW/ツールのバージョンなど）

BlazorWebAssemblyアプリでASP.NET Coreでホストされた環境
クライアント側: .Net Standard2.1
サーバー側: Net Core3.1
ClosedXML Version="0.97.0"

Comments

[退会済みユーザー]

Excel ファイルを読んでどうしたいのですか？　ブラウザに結果を表示したいということだろうと想像してますが、そうだとするとサーバー側で Excel ファイルを読んで、それを何らかの手段でクライアントに送信して、クライアントでそれを受け取ってブラウザに表示するということになると思いますが、そんなことは全然考えてないのでは？

[womomo]

クライアント側(.Net Standard)でExcelファイルを読んで、リスト化し、リストを引数にサーバー側へ処理を投げDB登録したいです。
当初、JavaScrip側でファイル選択したファイルをクライアント側(.Net Standard)からサーバー側(.Net Core3.1)へアップロードし、サーバー側でExcel処理する予定でしたが、クライアント側からのアップロードの方法が分からず、Excel読込をクライアント側で処理するの方法で試みるに至りました。
同じロジックでサーバー側でExcel処理は成功済ですが、なぜクライアント側ではうまくいかないのかご教授いただけると幸いです。.Net Standard2.1でもVersion="0.97.0"のClosedXML は対応しているとネットではあったんですけどね。

[Zuishin]

ClosedXML はセキュリティ的に無理じゃないかと思うんですが、どこに対応していると書いていますか？

[womomo]

セキュリティ。なるほど。ありがとうございます。もう少し調べてみます。

[Zuishin]

https://qiita.com/nobu17/items/7465006ce24a4490183b#4inputfile%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88
InputFile を使えばファイルの送信ができるはずなので、一度サーバーに送ってサーバーで処理するのが良いと思います。

[退会済みユーザー]

> 当初、JavaScrip側でファイル選択したファイルをクライアント側(.Net Standard)からサーバー側(.Net Core3.1)へアップロードし、サーバー側でExcel処理する予定でしたが、

それが現実的だと思います。

[womomo]

アドバイス感謝します。
InputFileですが、.Net Standard2.1では使えないです。
テスト的に、Client側：.Net CoreでTryした時にはいけましたが。

[Zuishin]

.NET 6 にアップグレードすることをおすすめします。WebAssembly にコンパイルされるので、不都合は何もないと思います。

[退会済みユーザー]

jQuery / JavaScript を使ってもファイルアップロードはできるのだから、InputFile とかを使わなくてもできる気がします。（気がするだけで確認したわけではありませんが）

jQuery / JavaScript のコードは以下の記事の View のコードの下の方を見てください。

ASP.NET Core MVC でファイルアップロード
http://surferonwww.info/BlogEngine/post/2020/01/19/aspnet-core-mvc-file-upload.aspx

これを以下の記事を参考に Blazor に組み込んで呼び出すことを検討してはいかがですか？

ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す
https://learn.microsoft.com/ja-jp/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-3.1

[退会済みユーザー]

質問者さん、その後無言ですが、回答したのでそれに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。

[womomo]

ご返信ありがとうございます。返信が遅くなり申し訳ありません。
別件の仕事と出張で、こちら確認ができませんでした。
回答くださった内容を後日試して、返信します。

[退会済みユーザー]

その後どうなりましたか？

[womomo]

詳細な回答とお気遣いありがとうございます。
サーバーへ飛ばないところで、止まっています。

[womomo]

うまくサーバーへファイルをアップロード出来ました。
アップロードしたExcelを読み込むまでは、まだできていないですが、
一番のネックだったところが解決して、本当に感謝します。
ありがとうございました。

[womomo]

◆exampleJsInterop.js　の
new FormData(document.getElementById("form_fileupload"))がエラーになるので、
以下のように設定したのですが、ファイル情報がうまく渡っていないのかサーバー側でコピー作成したファイル情報が同じアップロード元と同じにならないです。
const createOpenFileDialog = () => {
return new Promise(resolve => {
const input = document.createElement('input');
var form = document.createElement('form');

form.id = 'form_fileupload';
form.method = 'post';
form.enctype = 'multipart/form-data';
form.action = '/api/NyukaYoteiTourokuSaveFile/LoadExcel';

input.type = 'file';
input.accept = '.xlsx';
form.appendChild(input);
input.onchange = event => { resolve(event.target.files[0]); };
input.click();
});
};

return new Promise(resolve => {
resolve(createOpenFileDialog()
.then((response) => {

var blob = new Blob([response.buffer], { type: "application/octet-stream" });
var formData = new FormData();
formData.append("postedFile", blob, response.name);

// var formData = new FormData(document.getElementById("form_fileupload"));
return formData;

}).then(function (formData) {

$.ajax({
url: '/api/NyukaYoteiTourokuSaveFile/LoadExcel',
// method: 'post',
type: 'post',
data: formData,
processData: false, // jQuery にデータを処理させない
contentType: false // contentType を設定させない
}).done(function (response) {
window.alert("通信成功");
// $("#result").empty;
// $("#result").text(response);
}).fail(function (jqXHR, textStatus, errorThrown) {
window.alert("通信失敗");
// $("#result").empty;
// $("#result").text('textStatus: ' + textStatus +
// ', errorThrown: ' + errorThrown);
});

return "test";
}));

◆Blazor サーバーの Controller にアップロードされたファイルを受け取って処置する API
//Excelﾌｧｲﾙ取込
[HttpPost("LoadExcel")]
public void PostExcelAsync([FromForm] IFormFile postedFile)
{
string result = "";
if (postedFile != null && postedFile.Length > 0)
{
string typ = postedFile.ContentType;

// アップロードされたファイル名を取得
string filename = postedFile.FileName;
var ExcelFilePath = Path.Combine(Directory.GetCurrentDirectory(), "Import", "Book.xlsx");
using (var stream = System.IO.File.Create(ExcelFilePath))
{
postedFile.CopyTo(stream);
}
// アップロードされたファイルを処理（省略）

result = $"{filename} ({postedFile.ContentType}) - " +
$"{postedFile.Length} bytes アップロード完了";
}
else
{
result = "ファイルアップロードに失敗しました";
}

return;
}

[退会済みユーザー]

> うまくサーバーへファイルをアップロード出来ました。

・・・ということではなかったのですか？

私が回答で書いたコードをそのように大幅に変えられたのでは何が何だか分かりません。新たに別スレッドを立てて何をしたのか詳しく分かるように質問を書いてはいかがですか？

[womomo]

サーバー側にファイルが出来たので、アップロード出来たのかと思いましたが、
内容がExcelで読み込まないものだったようです。
フォームをJavaScriptで作成するように記述し直しただけなのですが、
おっしゃる通り、また改めてスレッドを立てるようにします。
今回の件で、随分勉強になりました。
全く見えなかった道が開け、感謝しています。ありがとうございました。

Answer 1

クライアント側(.Net Standard)でExcelファイルを読んで、リスト化し、リストを引数にサーバー側へ処理を投げDB登録したいです。

Blazor WASM では「アプリがブラウザーの機能に制限されます」ということで、言い換えるとクライアント側だけではブラウザができることしかできない、すなわち、HTML5 の File API とか JavaScript が動くだけで .NET アプリが動くわけではない、なので ClosedXML を操作して Excel ファイルを読むなんてことはできないはずです。（何をどうしようと 100% 不可能・・・とまで言い切る自信はありませんが）

なので、最初の質問者さんの案、

当初、JavaScrip側でファイル選択したファイルをクライアント側(.Net Standard)からサーバー側(.Net Core3.1)へアップロードし、サーバー側でExcel処理する予定でしたが、

・・・が現実的だと思います。

jQuery / JavaScript を使ってもファイルアップロードはできますので、Blazor WASM のクライアント側だけでも同様にファイルのアップロードはできます。

jQuery / JavaScript のコードは以下の記事の View のコードの下の方を見てください。

ASP.NET Core MVC でファイルアップロード
http://surferonwww.info/BlogEngine/post/2020/01/19/aspnet-core-mvc-file-upload.aspx

jQuery / JavaScript を使ってファイルアップロードするコードを .js ファイルにまとめ、以下の記事を参考に Blazor に組み込んで呼び出すことを検討してはいかがですか？

ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す
https://learn.microsoft.com/ja-jp/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-3.1

具体的にどうするかの例を以下に書いておきます。

(1) ファイルアップロードページを作って Blazor クライアントに組み込む。

@page "/jsinterop"
@inject IJSRuntime JSRuntime;

<h1>Call JavaScript Function Example</h1>

<form id="form1" method="post" enctype="multipart/form-data" action="/Upload">
    <input type="file" name="postedfile"/>
</form>

<button type="button" class="btn btn-primary" @onclick="UploadFile">
    アップロード
</button>

<div id="result"></div>

<br /><br />

@code {
    private async Task UploadFile()
    {            
        await JSRuntime.InvokeVoidAsync("uploadFile");
    }
}

(2) ファイルアップロード用の jQuery / JavaScript コードの js ファイルを作成。名前は任意ですがここでは exampleJsInterop.js としておきます。

window.uploadFile = () => {
    // FormData オブジェクトの利用
    var fd = new FormData(document.getElementById("form1"));
    
    $.ajax({
        url: '/Upload',
        method: 'post',
        data: fd,
        processData: false, // jQuery にデータを処理させない
        contentType: false  // contentType を設定させない
    }).done(function (response) {
        $("#result").empty;
        $("#result").text(response);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        $("#result").empty;
        $("#result").text('textStatus: ' + textStatus +
            ', errorThrown: ' + errorThrown);
    });
}

(3) 上の exampleJsInterop.js と jQuery.js を Blazor クライアントの wwwroot フォルダ下に配置。

(4) wwwroot フォルダ下の index.html に exampleJsInterop.js と jQuery.js の script タグを追加する。

(5) Blazor サーバーの Controller にアップロードされたファイルを受け取って処置する API を追加。以下のような感じ。

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace BlazorWasmCoreSupported.Server.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class UploadController : ControllerBase
    {
        [HttpPost]
        public string Post([FromForm] IFormFile postedFile)
        {
            string result = "";
            if (postedFile != null && postedFile.Length > 0)
            {
                // アップロードされたファイル名を取得
                string filename = System.IO.Path.GetFileName(postedFile.FileName);

                // アップロードされたファイルを処理（省略）

                result = $"{filename} ({postedFile.ContentType}) - " +
                    $"{postedFile.Length} bytes アップロード完了";
            }
            else
            {
                result = "ファイルアップロードに失敗しました";
            }

            return result;
        }
    }
}

アプリを実行してファイルアップロードに成功すると以下のようになります。