Blazor

Một trình xem tài liệu hoạt động bên trong Blazor

Blazor cung cấp cho bạn mô hình thành phần và vòng lặp render mà không quá quan tâm tới JavaScript của bên thứ ba. Doconut làm việc với điều đó thay vì chống lại: việc render diễn ra phía máy chủ trong quá trình của bạn, và widget được gắn vào một phần tử đơn giản mà bạn kiểm soát thông qua vòng đời interop bình thường.

75
định dạng tệp, không phân tích phía client
2
các mô hình hosting được hỗ trợ
0
payload WASM cho việc render

Vấn đề

Tại sao các cách tiếp cận thường gặp lại gây khó khăn trong Blazor

Lộ trình phía client có nghĩa là đưa một engine render vào trình duyệt. Trong Blazor WebAssembly, điều này ảnh hưởng trực tiếp đến kích thước tải xuống của bạn, và nó chỉ hỗ trợ PDF — ngay khi ai đó tải lên một DOCX hoặc XLSX, bạn lại trở lại điểm xuất phát.

Lộ trình iframe-to-Office có nghĩa là tài liệu của bạn phải đi qua hạ tầng của người khác, điều này là một cuộc trao đổi với đội bảo mật mà bạn có lẽ không muốn thực hiện hai lần.

Doconut chọn lộ trình thứ ba. Tệp được raster hoá thành các hình ảnh trang bởi máy chủ của bạn, và Blazor chỉ cần lưu trữ một div. Cây thành phần của bạn không bao giờ render lại một trình xem mà nó không sở hữu, và engine diff không có gì để đấu tranh.

Khả năng

Những gì bạn nhận được trong một ứng dụng Blazor

Blazor Server và WebAssembly

Render luôn diễn ra phía máy chủ. Trong Server, cuộc gọi là trực tiếp; trong WebAssembly, bạn mở một endpoint API tối thiểu cho cuộc gọi mở và truyền token trả về cho widget. Cả hai chỉ cần vài dòng mã.

Gắn qua OnAfterRenderAsync

Khởi tạo widget một lần, sau lần render đầu tiên, thông qua hook interop JS tiêu chuẩn. Vì Blazor không bao giờ sở hữu DOM nội bộ của trình xem, các lần render tiếp theo sẽ không ảnh hưởng tới nó.

Hoạt động với chế độ render bạn chọn

Interactive Server, Interactive WebAssembly, hoặc Auto. Trình xem được điều khiển bằng một token không trong suốt thay vì trạng thái thành phần, vì vậy việc chuyển đổi chế độ render không làm thay đổi tích hợp.

Không có khoảng trống định dạng

Cùng một thành phần mở PDF, DOCX, XLSX, PPTX, DWG, MSG và các định dạng còn lại trong danh mục. Bạn viết một trang trình xem, không phải mỗi loại tệp một trang.

Hình thu nhỏ, tìm kiếm và in

Giao diện điều hướng đi kèm với widget. Bạn chỉ cần kết nối một trình xem, không phải tự xây dựng từ canvas và ô nhập số trang.

Tài liệu vẫn ở trên máy chủ của bạn

Không có gì được truyền tới trình duyệt ngoại trừ các hình ảnh trang đã render, điều này quan trọng hơn trong WebAssembly so với mong đợi — cuối cùng client vẫn có thể kiểm tra hoàn toàn.

Tích hợp

Program.cs và một trang Blazor

doconutHost.mount là một vài dòng JavaScript của bạn gọi $('#div_ctlDoc').docViewer({ ... }) và sau đó .View(token). Giữ nó ngoài Blazor là có chủ đích — DOM của widget không nên là thứ mà renderer cố gắng hòa giải.

Các nền tảng được hỗ trợ

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);
    }
}

Chi tiết

Những điều cần biết trước khi bắt đầu

  • Widget là một plugin jQuery, vì vậy jQuery phải được tải trước các script của trình xem.
  • UseSession() và UseDoconutResources() phải được đăng ký trước UseDoconut().
  • Trong WebAssembly, cuộc gọi mở thuộc về server — mở nó như một endpoint API tối thiểu và chỉ trả về token.
  • Token là không trong suốt. Không đặt nó trong query string mà bạn ghi log, và không lưu cache nó trong trạng thái thành phần lâu hơn thời gian tồn tại của trang.

Câu hỏi thường gặp

Điều này có hoạt động trong Blazor WebAssembly, hay chỉ Server?

Cả hai. Render luôn diễn ra phía máy chủ, vì vậy trong WebAssembly bạn thêm một endpoint gọi OpenDocumentAsync và trả về token. Client không bao giờ phân tích một tài liệu, đó là lý do payload WASM không bị ảnh hưởng.

Renderer của Blazor có đấu tranh với DOM của trình xem không?

Không, với điều kiện bạn gắn vào một phần tử mà Blazor coi là lá. Render một div trống và để widget điền vào nó qua interop — engine diff không có con để hòa giải.

Tôi có cần một trang trình xem riêng cho mỗi loại tệp không?

Không. Một trang xử lý toàn bộ danh mục. Định dạng được phát hiện từ tài liệu bạn mở, không phải do bạn chọn trước.

Thử nó với tài liệu của bạn

Giấy phép tạm thời mất vài phút để yêu cầu và chạy hoàn toàn trên máy của bạn. Những tệp quan trọng là những tệp đã gây ra lỗi cho trình xem hiện tại của bạn.