Blazor Server と WebAssembly
レンダリングはどちらの場合もサーバー側です。Server では呼び出しが直接行われ、WebAssembly では open 呼び出しを最小限の API エンドポイントとして公開し、返されたトークンをウィジェットに渡します。どちらも数行で実装できます。
Blazor
Blazor 内で動作するドキュメントビューア
Blazor はコンポーネントモデルとレンダー ループを提供し、サードパーティの JavaScript にはあまり関心を持ちません。Doconut はそれに対抗するのではなく、協調して動作します：レンダリングは自分のプロセス内でサーバー側で行われ、ウィジェットは通常のインターロップ ライフサイクルを通じて制御できるシンプルな要素にマウントされます。
- 75
- ファイル拡張子、クライアント側の解析なし
- 2
- サポートされているホスティングモデル
- 0
- レンダリング用 WASM ペイロード
問題
Blazor で従来のアプローチがうまくいかない理由
クライアント側のルートは、レンダリングエンジンをブラウザに組み込むことを意味します。Blazor WebAssembly ではそれがダウンロードサイズに直結し、対応できるのは PDF のみです — 誰かが DOCX や XLSX をアップロードした瞬間、最初に戻ってしまいます。
iframe から Office へのルートは、ドキュメントが他者のインフラを経由することを意味し、セキュリティチームとのやり取りが二度必要になる可能性があります。
Doconut は第三のルートを取ります。ファイルは自サーバーでページ画像にラスタライズされ、Blazor は div をホストするだけです。コンポーネントツリーは所有していないビューアを再レンダリングすることはなく、差分エンジンは何も戦うものがありません。
機能
Blazor アプリで得られるもの
OnAfterRenderAsync を通じてマウント
最初のレンダー後にウィジェットを一度だけ初期化し、標準の JS インターロップ フックを使用します。Blazor はビューアの内部 DOM を所有しないため、以降の再レンダーでは影響を受けません。
選択したレンダー モードで動作
Interactive Server、Interactive WebAssembly、または Auto。ビューアはコンポーネントの状態ではなく不透明なトークンで駆動されるため、レンダーモードを切り替えても統合は変わりません。
フォーマットのギャップなし
同じコンポーネントで PDF、DOCX、XLSX、PPTX、DWG、MSG などカタログ全体を開くことができます。ファイルごとにページを作成するのではなく、1つのビューアページを書くだけです。
サムネイル、検索、印刷
ナビゲーション UI はウィジェットに含まれています。キャンバスやページ番号入力からビューアを構築するのではなく、ビューアを接続するだけです。
ドキュメントはサーバーに残ります
レンダリングされたページ画像以外はブラウザにストリーミングされません。これは WebAssembly では想像以上に重要です — クライアントは完全に検査可能ですから。
統合
Program.cs と Blazor ページ
doconutHost.mount は、$('#div_ctlDoc').docViewer({ ... }) を呼び出し、続いて .View(token) を実行する独自の JavaScript 数行です。Blazor の外に置くのは意図的で、ウィジェットの DOM がレンダラーによって調整されるべきものではありません。
サポートされているプラットフォーム
Blazor ServerBlazor WebAssembly.NET 8.NET 6WindowsDocker
csharp
// Program.cs — order matters
builder.Services.AddDoconut(options =>
{
options.LicensePath = "Doconut.Viewer.lic";
});
builder.Services.AddSession();
app.UseSession(); // before UseDoconut()
app.UseDoconutResources(); // before UseDoconut()
app.UseDoconut();
// Viewer.razor — open server-side, hand the token to the widget
@inject Doconut.Viewer Viewer
@inject IJSRuntime JS
<div id="divDocViewer"><div id="div_ctlDoc"></div></div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender) return;
// Authorize first — the viewer renders whatever you hand it.
string token = await Viewer.OpenDocumentAsync("wwwroot/files/Sample.pdf");
await JS.InvokeVoidAsync("doconutHost.mount", token);
}
}詳細
開始前に知っておくべきこと
- ウィジェットは jQuery プラグインなので、ビューアのスクリプトより先に jQuery をロードする必要があります。
- UseSession() と UseDoconutResources() はどちらも UseDoconut() の前に登録しなければなりません。
- WebAssembly では open 呼び出しはサーバー側にあり、最小限の API エンドポイントとして公開し、トークンだけを返します。
- トークンは不透明です。ログに残すクエリ文字列に入れないで、ページの存続期間以上にコンポーネント状態にキャッシュしないでください。
よくある質問
これは Blazor WebAssembly でも動作しますか、それとも Server のみですか？
両方です。レンダリングは常にサーバー側で行われるため、WebAssembly では OpenDocumentAsync を呼び出すエンドポイントを追加し、トークンを返します。クライアントはドキュメントを解析しないので、WASM ペイロードは影響を受けません。
Blazor のレンダラーはビューアの DOM と競合しますか？
いいえ、Blazor がリーフとして扱う要素にマウントすれば問題ありません。空の div をレンダーし、ウィジェットがインターロップで中身を埋めるようにします — 差分エンジンは調整すべき子要素がありません。
ファイルタイプごとに別々のビューアページが必要ですか？
いいえ。1つのページでカタログ全体を処理します。フォーマットは開くドキュメントから検出され、事前に選択する必要はありません。
自分のドキュメントで試す
一時ライセンスの取得には数分かかり、完全にご自身のマシン上で実行されます。重要なファイルは、現在のビューアで既に問題を起こしているものです。