blazorでファイルダウンロード

blazorにはwebappのFileResultを使用したPostBackような動的にファイルコンテンツを作成して、ファイルをダウンロードさせる仕組みが無い。

では、どうやってファイルコンテンツを作成して、ダウンロードさせるかを調べてみた。

普通に考えると、1番簡単なのは、コールバックでコンテンツを作成して、Data URLに変換し、そのリンクを表示させる方法だが、これだと、作成のトリガーとリンクをクリックするという、2アクションが必要になる。

結局、作成トリガー(例えばボタンクリック)でファイルのダウンロードまで、行うには、Javascriptの助けを借りることになる。

以下のような感じで可能だが、サイズ制限(MSのサイトでは250Mbytes以下と記述されていた)があるようだ。

//
//  ファイルをダウンロードするJSヘルパー
//      やっていることは単純で、StreamからBlobを作成してそのurlをもった、
//      aタグを生成し、aタグに対してclickイベントを発生させた後、aタグとdata url
//      に割いているリソースを開放。
//      結構良く使う手段だね。blazor独自の点は.NETのStreamを
//      Javascript用にWrappingしてarrayBufferを取得している点ぐらい。
var mylibrary = {
    DownloadFile : async (StreamRef, FileName) => {
        const arrayBuffer = await StreamRef.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement('a');
        anchorElement.href = url;
        anchorElement.download = FileName ?? '';
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    }
};
using(MemoryStream mstm = new MemoryStream()) {
	// コンテンツ作成
	await mstm.FlushAsync();
	// 念のため
	mstm.Seek(0L,SeekOrigin.Begin);
	// Javascriptに渡すためのStreamリファレンス作成
	using var stmRef = new DotNetStreamReference(stream: mstm);
	// Javascript呼出
	await JSRuntime.InvokeVoidAsync("mylibrary.DownloadFile",stmRef,FileName);
}

大きいファイルの場合は、物理的にファイルを作成して、そのリンクでaタグ作成および、クリック・・・という形を取れとのこと。

何か他に良い方法は無いものだろうか・・・

ファイルダウンロードの標準的な仕組みをblazor内で定義して欲しいものだ。

カテゴリー: .NET, asp.net core, Blazor, C#, javascript, Web, 技術系 | コメントする

ClosedXML

今まで、.NET上からExcelファイルを操作するのに、epplusを使用してきた。poiの.NETポーティングである、npoiが有ることも知っていたが、こちらは少々使い勝手が悪いので、敬遠していたのだが、ご存じの通り、epplusが有償化されてしまったので、仕方なくepplusの古いバージョン(4.x)を使っていたけれど、何か他に代わりになる物がないかと探していたら、ClosedXMLというオープンソースのライブラリパッケージを見つけた。(私が知らないだけで、以外と有名らしい。)

nugetからパッケージ取得が可能。

こちらのライブラリは、npoiよりもepplus寄りの使い勝手で、中々良さそうだ。ただ、バージョンが、最新でも、0.96.0で、1.0以下なので、その辺はどうなのだろうか・・・

チョット使ってみた感じでは特に動作に問題は無さそうだ。ただ、きちんと測っていないが、パフォーマンスがepplusより悪い感じがする。

まぁ、簡単なExcelファイルを作るくらいなら問題は無さそうだが・・・

下記が、簡単なサンプル。npoiより使い勝手いいでしょ?

using(var wb = new XLWorkbook()) {
    var ws = wb.Worksheets.Add("MySheet");
    // セル結合
    ws.Range(1,1,1,10).Merge();
    ws.Cell(1,1).Value = "ClosedXML Test";
    // 文字配置
    ws.Cell(1,1).Style.Alignment.SetHorizontal(XLAlignmentHorizontalValues.Center);

    for(int i=1; i <= 10; i++) {
        for(int j=1; j <= 10; j++) {
            ws.Cell(i+2,j).Value = i*j;
        }
        var xrng = ws.Range(i+2,1,i+2,10);
        if ((i%2) == 0) {
            // セル背景色
            xrng.Style.Fill.SetPatternType(XLFillPatternValues.Solid);
            xrng.Style.Fill.SetBackgroundColor(XLColor.AirForceBlue);
        }
    }

    for(int i=0; i < 10; i++) {
        // Excel関数
        char c = (char)('A'+i);
        ws.Cell(13,i+1).SetFormulaA1($"=SUM({c}3:{c}12)");
    }

    // 罫線
    var rng = ws.Range(3,1,13,10);
    rng.Style.Border.SetOutsideBorder(XLBorderStyleValues.Thin);
    rng.Style.Border.SetInsideBorder(XLBorderStyleValues.Thin);

    // 幅自動調整
    ws.Columns(1,10).AdjustToContents();

	// 保存
    wb.SaveAs(filename);
}
結果

SaveAsメソッドはStreamに書き出すことも可能なので、WebAppでは、MemoryStreamに書き出して、FileResultを返すことによって作成したファイルのダウンロードも可能。

async Task<IActionResult>OnPost() {
	・・・
	// ダウンロード
	using(MemoryStream stm = new MemoryStream()) {
	    wb.SaveAs(stm);
	    await stm.FlushAsync();
	    byte[] buf = stm.ToArray();
	    return File(buf,"application/octet-stream",FileName);
	}
}

Workbook(XLWorkbook)のコンストラクタに、ファイル名やStreamを指定することで、Excelファイルを読み込めるので、テンプレート的な使い方も可能。

チョット使い込んでみようかな。

カテゴリー: .NET, C#, 技術系 | コメントする

node.jsでMongoDb GridFSへファイルアップロード

前回は、ファイルのダウンロードだったけど、今回はアップロード。

アップロードの場合、フォームをpostするのに、enctype=’multipart/form-data’とする必要があるが、node.js初心者のため、まずはここの処理でつまずいた。

ASP.netなんかだと、IFormFileなどで、簡単にファイルを切り出せるけど、node.jsではサードパーティ製のフィルタ(?)を使用する必要があるようだ。一番一般的に使われているのはmulterというものらしい。post時にこのフィルタを指定すると、ファイル以外のフィールド値とファイルを取得できる。

<form method="post" enctype="multipart/form-data">
	タイトル:<input type="text" name="title"/>
	ファイル:<input type="file" name="upfile"/>
	<input type="submit" value="アップロード"/>
</form>
var router = express.Router();
var multer = require('multer');
var upload = new multer();

router.post('/', upload.any(), async (req,res,next) => {

	// fieldとファイルを取得
	const { fld , files } = req;

	var title = fld['title'];
	var upfile = files[0];

	・・・

ちなみに、upfile(=files[0])の内容は以下のような感じ。

{
  fieldname: 'upfile',
  originalname: 'ファイル名.タイプ',
  encoding: '7bit',
  mimetype: 'image/png',
  buffer: <Buffer 89 50 4e  ... 5926 more bytes>,
  size: 5976
}

これをMongoDbのGridFSにアップロードしたいのだが、やはりダウンロードと同じく、非同期しかサポートされていないので、以下のような関数を定義した。

	await cli.connect();
	let db = cli.db('DBName');
	let fs = new mongo.GridFSBucket(db);
	let stm = fs.openUploadStream(upfile.originalname);
	let fileid = await WriteAsync(stm,upfile.buffer);
・・・
//
//  GridFSへの書き込み(同期っぽく見えるようにしてみた)
//
async function WriteAsync(stm,data) {
  return new Promise((resolve,reject) => {
    try {
      // end()を呼ぶとfinishイベントが発生
      stm.on('finish',()=>{
        resolve(stm.id);
      });
      stm.on('error',()=>{
        reject('Write Error');
      });
      var sts = stm.write(data);
      if (!sts) {
        reject('Write Error');
      }
      // これ呼ばないと永遠に終わらない
      stm.end();
    } catch (err) {
      reject(err);
    }
  });

気を付けないといけないのは、GridFSBucketWriteStream.end()を呼び出さないと、永遠に待ち状態になってしまうところ。

色々と調べたのだが、あまり良い例が載っていなくて苦労した。

カテゴリー: MongoDB, node.js, Web, 技術系 | コメントする

node.jsでMongoDB GridFSからファイル取得

node.jsでMongoDB上のGridFSからファイルをダウンロードするのに手間取ったので、メモ。

やりたかったのは、MongoDB上のGridFSからイメージファイルデータを取得して、データURLを作りたかっただけだけど、node.jsのMongoDB DriverのGridFSBucketReadStreamのreadメソッドが、非同期動作しかできないようで、色々苦労した・・・

結局、read周辺の部分をpromiseを使用して、async funcitonにする事でとりあえず、一見落着。

// ObjectIdを使用してGridFSBucketReadStreamを得る
var stm = fs.openDownloadStream(ObjectId("xxx・・・"));
// 同期的にイメージファイルデータ取得
var body = await ReadAsync(stm);
var imgUrl =  'data:image/jpeg;base64,' + buffer.Buffer.from(body).toString('base64');

//
// GridFSBucketReadStreamから同期的に(見えるように)データ取得
//	戻り値:Promise<Buffer>
//
async function ReadAsync(stm) {
  return new Promise((resolve,reject) => {
    try {
      var totalsize = 0; // 読み取ったトータルサイズ
      var chunks = [];  // 読み取ったchunk
      // データ取得時コールバック定義
      stm.on('data',
        (v) => {
          // 読込んだデータ(chunk)を保存
          var buf = buffer.Buffer.from(v);
          chunks.push(buf);
          totalsize += buf.length;
        }
      );
      // データ終了時コールバック定義
      stm.on('end',
        () => {
          // 結合先のBufferを作成
          var ximage = buffer.Buffer.alloc(totalsize);
          // 全chunkの結合
          var offset = 0;
          for(var i=0; i < chunks.length; i++) {
            chunks[i].copy(ximage,offset);
            offset += chunks[i].length;
          }
          // 読込んだデータを返す
          resolve(ximage);
        }
      );
      // 読込可時コールバック定義
      stm.on('readable',
        // 読込開始
        ()=> stm.read()
      );
    } catch (err) {
      reject(err);
    }
  });
}

解決するまでにちょっと時間が掛かったなぁ・・・

これが正解かどうかは分からないけど、取敢えず動いているからいいや。

正規のライブラリにもawait stm.read()で呼び出させるようなメソッド用意しておいて欲しいな。

カテゴリー: MongoDB, node.js, 技術系 | コメントする

GroupByのグルーピング対象を動的に変更する

.NET LinqでGroupByを使用して、クエリ内容をグルーピングする際に、場合によって、グルーピング対象を動的に変更したい場合がある。

これを実装するのに一番簡単な方法を見つけたのでメモ。

Enumerable.GroupBy拡張メソッドのオーバーロードの1つに、以下の物がある。

GroupBy<TSource,TKey>(IEnumerable<TSource>, Func<TSource,TKey>, IEqualityComparer<TKey>)

このオーバーロードのパラメータ、IEqualityComparer<TKey>をインプリメントしたクラスを作ることで、グルーピング単位を外部から指定できるようになる。

例えば、以下のようなクラスのリストを「年」+「月」でグルーピングしたり、「年」+「月」+「セールスマン」でグルーピングしたりしたい場合、

public partial class Sales
{
    public int Year { get; set; }            // 年
    public int Month { get; set; }           // 月
    public string SalesMan { get; set; }     // セールスマン
    public string ProductName { get; set; }  // 商品名
    public long Qty { get; set; }            // 販売数
}

IEqualityComparer<Sales>をインプリメントして、以下のようなクラスを作る。

class SalesEqaulityComparer : IEqualityComparer<Sales> {
    public bool useYear { get; set; }
    public bool useMonth { get; set; }
    public bool useSalesMan { get; set; }
    public bool useProductName { get; set; }
    // 比較方法(IEqualityComparer<T>)
    public bool Equals(Sales x, Sales y) {
        if (useYear && !x.Year.Equals(y.Year)) return false;
        if (useMonth && !x.Month.Equals(y.Month)) return false;
        if (useSalesMan && !x.SalesMan.Equals(y.SalesMan)) return false;
        if (useProductName && !x.ProductName.Equals(y.ProducName)) return false;
        return true;
    }
    // HashCodeの取得(IEqualityComparer<T>)
    public int GetHashCode(Sales s) {
        int hash = 0;
        if (useYear) hash ^= s.Year.GetHashCode();
        if (useMonth) hash ^= s.Month.GetHashCode();
        if (useSalesMan) hash ^= s.SalesMan.GetHashCode();
        if (useProductName) hash ^= s.ProductName.GetHashCode();
        return hash;
    }
}

実際にグルーピングするときは、このクラスインスタンスを作成し、グルーピングしたいuseXXXにtrueを設定することにより、指定した項目でグルーピングができる。

例えば、「年」,「月」でグルーピングしたい場合は、useYearとuseMonthにtrueを設定し、その他はfalseに設定。「年」,「月」,「セールスマン」でグルーピングしたい場合は、useYear,useMonth,useSalesManにtrueを設定して、その他はfalseを設定して、以下のようなクエリを発行する。

List<Sales> SalesList = new SalesList();
・・・
var salescomparer = new SalesEqaulityComparer();
// グルーピングしたい項目の指定
salescompare.useYear = true;
salescompare.useMonth = true;
・・・
var g = SalesList.GroupBy(s=>s,salescomparer);
foreach(var itm in g) {
	Console.WriteLine($"{itm.First().Year},{itm.First().Month},・・・{itm.Sum(v=>v.Qty)}}");
}

意外と使えます。

カテゴリー: .NET, C#, LINQ, 技術系 | コメントする

またまた、deprecateパッケージ発見してしまった・・・

私が知らなかっただけなのかもしれないが、Microsoft.EntityFrameworkCore.SqlServer.DesignやMicrosoft.EntityFrameworkCore.Sqlite.Design等のパッケージがdeprecate対象となっていた。

今まで、SQL ServerやSqlite等をEF Coreを使用してscaffoldする場合やmigrationするのに、無条件でこれらのパッケージ追加していたんだが、いつの間にやら、このパッケージ無しでもscaffoldやmigrationできるようになっていたみたいだね・・・

Pomelo.EntityFrameworkCore.MySql.Designとかはnuget.orgで見る限りではdeprecate対象にはなっていないようだが、更新日が2017年と古い。試してはいないけど、DBプロバイダ.Designパッケージは必要無くなったのかな・・・

カテゴリー: .NET, Entity Framework, 技術系 | 2件のコメント

.NET7 PreviewでのSQL Serverへの接続

.NET7 Preview版で、SQL Serverに接続する場合、デフォルトで暗号化がTrueに設定されるようになったようで、今までの接続文字列では以下のようなエラーが出て、接続出来ない。

"Data Source=<server>;Initial Catalog=<db>;User ID=<ID>;Password=<PWD>"

A connection was successfully established with the server, but then an error occurred during the pre-login handshake. (provider: TCP Provider, error: 35 – An internal exception was caught)

これを回避するには、接続文字列に、”encrypt=false“を入れれば良い。

"Data Source=<server>;Initial Catalog=<db>;User ID=<ID>;Password=<PWD>;encrypt=false"

この情報を探すのに結構手間取ってしまったので、メモ。

SQL Serverからdotnet ef dbcontext scaffoldしたかっただけなのだけど・・・

カテゴリー: .NET, Entity Framework, 技術系 | コメントする

Microsoft.Graph.AuthがDeprecateになっていた

しばらく、Microsoft Graph APIを触っていなかったのだが、Graph APIライブラリを使用して作成したアプリケーションのターゲット.NETフレームワークバージョンがサポートされなくなるため、再ビルドをしようとして、使用しているパッケージのバージョンを上げようと、パッケージをnuget.orgを見たら、Microsoft.Graph.AuthがDeprecate候補(元々Preview版だったけど)になっていたので、MSのサイトで調べたら、ここにAzure.Identityライブラリを使用しろやと書かれていた。

で、修正してみたのが以下のコード。(ユーザー名/パスワード プロバイダーの例)

/* Microsoft.Graph.Authは削除対象となったので、Azure.Identityに変更
この部分は不必要となった(以下見づらくて済まソ)
IPublicClientApplication app = PublicClientApplicationBuilder
    .Create(ServiceId)
    .WithAuthority(TenantId)
    .Build();
*/

// 必要とする権限(Microsoft.Graph.Auth⇒Azure.Identity) 指定フォーマットが変わった
//string [] scopes = new string[] { "https://graph.microsoft.com/User.Read", "https://graph.microsoft.com/Group.Read.All" };
string [] scopes = new string[] { "User.Read", "Group.Read.All" };

/* Graph API Authorization Providerの作成(Microsoft.Graph.Auth⇒Azure.Identity)
Providerは不要となり、GraphServiceClientにはCredentialとScopeを指定する。
var provider = new UsernamePasswordProvider(app,scopes);
// Graph API Clientの作成
var graphClient = new GraphServiceClient(provider);
*/

// Credentialの作成(Microsoft.Graph.Auth⇒Azure.Identity)
var options = new TokenCredentialOptions
{
    AuthorityHost = AzureAuthorityHosts.AzurePublicCloud
};
var cred = new UsernamePasswordCredential(username,pwd,TenantId,ServiceId,options); // テナントIDの指定形式も変わっている(https://・・・が要らない)

// Graph API Clientの作成(Microsoft.Graph.Auth⇒Azure.Identity)
var graphClient = new GraphServiceClient(cred,scopes);

var me = await graphClient.Me
    .Request()
    //.WithUsernamePassword(username,secPwd) Microsoft.Graph.Auth⇒Azure.Identity
    .GetAsync();

チョット見ない間にMSのページまで変更されていたので、焦りました・・・

ユーザー名/パスワード プロバイダーに関しては、SecureStringを使用しなくても良くなった点は良いね。

カテゴリー: .NET, Microsoft Graph, 技術系 | コメントする

Blazor Hybrid

.NET6からBlazor Hybridというものが追加された。

これは、MAUIやWPF,Windows FormsでRazorコンポーネントを動かそうと言う物だが、実際には、Razorコンポーネントが動作する、WebViewコントロールを画面に配置して、画面の一部として、Razorコンポーネントを実行するものである。

今のところ、このコントロールとホスト側の連携機能はほぼ無い(動作させるRazorコンポーネントをホスト側から指定することは可能。)

下記の画面キャプチャはWindows Forms上での例。

まぁ、まだ出たばかりなので、ホスト側との連携機能などは今後に期待したいところだ。

カテゴリー: .NET, Blazor, 技術系 | コメントする

asp.net coreのDIにDbContextを追加する

asp.net coreはDIが使えるが、DbContextをDIさせるのに少々手間取ったので備忘録としてメモ。

何に戸惑ったのかというと、DbContextインスタンスを作成するときに、appsettings.jsonから接続文字列を取り出して、それを接続に使う方法。

ドキュメントをちゃんと読んでいれば直ぐ分かるのだけどねぇ・・・

で、結局以下のような感じで接続文字列を取得して、インスタンス作成が可能。(UseSqlServerの部分は実際のDBMS用ドライバに合わせてねっ)

using Microsoft.EntityFrameworkCore;
using XXXContextNamespace;
・・・
var builder = WebApplication.CreateBuilder(args);
・・・
builder.Services.AddDbContext<XXXContext>(opt=>
    opt.UseSqlServer(builder.Configuration.GetConnectionString("XXXConnection")));

こうしておくと、例えばwebappならば、PageModelのコンストラクタから、このDbContextのインスタンスを取得することができる。

using XXXContextNamespace;
・・・
private readonly ILogger<IndexModel> _logger;
private readonly XXXContext _ctx;
public class IndexModel : PageModel {
	public IndexModel(ILogger<IndexModel> logger, XXXContext ctx) {
		_logger = logger;
		_ctx = ctx;
		・・・
	}
}

Blazor Serverなら、こんな感じ

@page "/"
@using XXXContextNamespace
@inject XXXContext XXXCtx
・・・
XXX:<select>
@if (XXXMasters != null) {
	foreach(var itm in XXXMasters) {
		<option value="@itm.Key">@itm.Name</option>
	}
</select>
・・・
@code {
	protected List<XXXMaster> XXXMasters = null!;
	・・・
	protected async Task OnInitializeAsync() {
		var q = XXXCtx.XXXMaster・・・;
		XXXMasters = await q.ToListAsync();
	}
}
カテゴリー: .NET, asp.net core, Entity Framework, Web, 技術系 | コメントする