スポンサーリンク

Blazor Server で画像を作成しダウンロードする(on Windows)

.NET CoreASP.NET CoreBlazor Server 5.0C#CSSVisual Studio 2019画像変換

Blazor Server でWeb画面やドキュメントを画像データに変換し、ダウンロードする機能を実装する場合、HTMLのテンプレートファイルを用意し、wkhtmltoimage で画像データに変換してからダウンロードするのがベターです。
ソースコードはGitHubで公開しています。

CoreHtmlToImage Nugetパッケージ について

Windows の場合、wkhtmltoimage の exeをラップしている CoreHtmlToImage Nugetパッケージを使うと簡単にwkhtmltoimageを使用できます。
CoreHtmlToImage NugetパッケージのソースコードはGitHubで公開されている。
CoreHtmlToImage は、wkhtmltoimage.exe を Process.Start() から実行することで画像データを生成している。
こちらで試した限りでは、Linux環境だと CoreHtmlToImage は上手く動かなかったので、Windows環境向けの Nugetパッケージとして使っています。

wkhtmltoimage について

wkhtmltoimage.exe は wkhtmltopdf サイトのダウンロードページからダウンロードできる。
よく使われるものを赤枠で囲った。

wkhtmltoimage.exe は wkhtmltopdf に含まれる1機能という扱いになっている。
wkhtmltopdf はGitHubでソースコードが公開されている。

wkhtmltoimageが画像データを生成する際のフォントは、OSのフォント(C:\Windows\Fonts)を使っている。

ソースコード構成

Blazor Server でファイルをダウンロードする をベースに、画像データ生成処理、 画像データダウンロード処理を追加しています。

ソースコード変更内容を解説

WebApplication1.csproj

・CoreHtmlToImage Nugetパッケージを追加。

Template/Html/Counter.html

・Counter.razor に記述されているHTML部分をコピーし、HTMLファイルとして利用可能な形にしたテンプレートファイルとして追加。
・{0} はスタイル(CSS)に置換する箇所。
・{1} は「Click me」ボタンがクリックされた値で置換する箇所。

・Counter.razor の一部ソースコードをコピーすることで、 Counter.razor の画面を画像データに変換する際のテンプレートとしている。

Template/Html/style.html

・site.css をまるコピーし、Counter.html で利用できるよう、<style>で囲っている。
・今回は、Web画面をダウンロードする機能なので、Webサイトの site.css をそのまま使っている。

SharedData/TemplateData.cs

・テンプレートファイルを読み込んだデータは、Webアプリ全体から参照できるようにstaticデータとしている。

Startup.cs

・テンプレートファイルの読み込みはWebアプリ起動時に1回だけ行い、画像変換する度に読み込まいことでパフォーマンスを上げている。

Pages/Counter.razor

・「Image file download」ボタンの処理で、HTMLテンプレートファイル内のデータ部を置換し、 置換後のHTMLを画像ファイルに変換し、画像ファイルとしてダウンロードしている。

コメント

タイトルとURLをコピーしました