Blazor Server 및 WebAssembly
렌더링은 어느 경우든 서버 측에서 이루어집니다. Server에서는 호출이 직접이며, WebAssembly에서는 열기 호출을 최소 API 엔드포인트로 노출하고 반환된 토큰을 위젯에 전달합니다. 두 경우 모두 몇 줄이면 충분합니다.
문제
일반적인 접근 방식이 Blazor에서 문제되는 이유
클라이언트 측 경로는 렌더링 엔진을 브라우저에 전달한다는 의미입니다. Blazor WebAssembly에서는 이것이 직접 다운로드 크기에 영향을 미치며, PDF만 지원합니다 — 누군가 DOCX나 XLSX를 업로드하면 처음부터 다시 시작하게 됩니다.
iframe-to-Office 경로는 문서가 타인의 인프라를 거쳐야 함을 의미하며, 이는 보안팀과 두 번 이상 논의하고 싶지 않은 대화가 될 수 있습니다.
Doconut은 세 번째 경로를 선택합니다. 파일은 자체 서버에서 페이지 이미지로 래스터화되고, Blazor는 단지 div를 호스팅하면 됩니다. 컴포넌트 트리는 소유하지 않은 뷰어를 다시 렌더링하지 않으며, diff 엔진이 싸울 것이 없습니다.
기능
Blazor 앱에서 얻는 것
OnAfterRenderAsync를 통한 마운트
첫 번째 렌더링 후 표준 JS 인터옵 훅을 통해 위젯을 한 번 초기화합니다. Blazor가 뷰어의 내부 DOM을 소유하지 않기 때문에 이후 재렌더링에서도 영향을 주지 않습니다.
선택한 렌더 모드와 함께 작동
Interactive Server, Interactive WebAssembly 또는 Auto. 뷰어는 컴포넌트 상태가 아니라 불투명 토큰에 의해 구동되므로 렌더 모드를 전환해도 통합이 변경되지 않습니다.
포맷 격차 없음
동일한 컴포넌트가 PDF, DOCX, XLSX, PPTX, DWG, MSG 및 기타 모든 형식을 열 수 있습니다. 파일 종류별로 페이지를 만들 필요 없이 하나의 뷰어 페이지만 작성하면 됩니다.
썸네일, 검색 및 인쇄
네비게이션 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에서는 열기 호출이 서버에 있어야 하며 — 이를 최소 API 엔드포인트로 노출하고 토큰만 반환합니다.
- 토큰은 불투명합니다. 로그에 쿼리 문자열로 넣지 말고, 페이지가 살아있는 동안 컴포넌트 상태에 캐시하지 마세요.
자주 묻는 질문
이것이 Blazor WebAssembly에서도 작동합니까, 아니면 Server 전용입니까?
두 경우 모두 가능합니다. 렌더링은 항상 서버 측에서 이루어지므로 WebAssembly에서는 OpenDocumentAsync를 호출하고 토큰을 반환하는 엔드포인트 하나를 추가합니다. 클라이언트는 문서를 파싱하지 않으며, 바로 그 때문에 WASM 페이로드가 영향을 받지 않습니다.
Blazor의 렌더러가 뷰어의 DOM과 충돌합니까?
아니요, Blazor가 리프 요소로 간주하는 요소에 마운트한다면 문제되지 않습니다. 빈 div를 렌더링하고 위젯이 인터옵을 통해 채우게 하면 — diff 엔진에 조정할 자식이 없습니다.
파일 유형별로 별도의 뷰어 페이지가 필요합니까?
아니요. 하나의 페이지가 전체 카탈로그를 처리합니다. 형식은 미리 선택하는 것이 아니라 열는 문서에서 감지됩니다.