Cách Các Nhà Phát Triển Nhúng PDF, Office và CAD Viewer vào Ứng Dụng Web .NET, React, Angular hoặc Vue để Tăng Tính Thân Thiện và Hiệu Quả: Từng Bước
Nếu bạn đang cố gắng biến một ứng dụng .NET nặng tài liệu thành một sản phẩm mà người dùng thực sự thích, bạn cần một trình xem có thể xử lý PDF, tệp Word, bảng Excel, bản PowerPoint và bản vẽ CAD — tất cả mà không buộc người dùng phải tải xuống một ứng dụng desktop hoặc dựa vào dịch vụ đám mây bên ngoài. Đó là lúc Doconut xuất hiện. Đây là một trình xem tài liệu phía máy chủ, truyền các trang đã render tới các trình duyệt web hỗ trợ và cung cấp chú thích bản địa, tìm kiếm toàn văn (kèm OCR) và in ấn có kiểm soát ngay từ đầu. Trong hướng dẫn này, chúng ta sẽ đi qua toàn bộ quy trình: từ cấu hình engine chuyển đổi của Doconut trong backend ASP.NET Core, đến việc nhúng trình xem vào các front‑end React, Angular và Vue. Sẵn sàng triển khai trải nghiệm tài liệu mượt mà, hiệu quả? Hãy cùng bắt đầu.
1. Tại Sao Cần Một Trình Xem Dành Riêng cho Ứng Dụng Web Doanh Nghiệp
Chi phí ẩn của “tải‑và‑mở”
Hầu hết các cổng thông tin lạc hậu chỉ đặt một liên kết tới tệp trên một chia sẻ. Khi nhấp vào, tệp sẽ được tải xuống hoặc mở bằng một chương trình đã cài đặt trên máy. Thực tế, điều này tạo ra một số vấn đề:
- Mất ngữ cảnh – người dùng rời khỏi cổng, mở tài liệu trong cửa sổ riêng, rồi phải nhớ lại mình đang ở đâu.
- Hiển thị không đồng nhất – các trình xem Word, Excel và CAD cài đặt trên máy có thể diễn giải tệp khác nhau, gây ra lỗi bố cục có thể ảnh hưởng đến quyết định pháp lý hoặc kỹ thuật.
- Rủi ro bảo mật – tệp rò rỉ ra khỏi biên giới công ty, khiến việc theo dõi audit và chính sách ngăn ngừa mất dữ liệu trở nên khó khăn.
- Năng suất thấp – người kiểm duyệt phải dùng nhiều công cụ chỉ để chú thích, tìm kiếm hoặc in, làm chậm quá trình phê duyệt.
Những gì các nhà phát triển thực sự cần
Một giải pháp hiện đại nên:
- Render mọi định dạng hỗ trợ trong trình duyệt (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Cung cấp API sạch cho backend .NET và front‑end React, Angular hoặc Vue.
- Bao gồm chú thích, tìm kiếm toàn văn (có OCR) và in ấn có kiểm soát mà không cần thêm thư viện.
- Mở rộng một cách an toàn — xử lý tài liệu trên server, truyền chúng dưới dạng các ô ảnh, và không bao giờ để lộ tệp thô cho client.
Doconut đáp ứng tất cả các yêu cầu này. Thư viện trình xem của nó chạy trên server .NET, chuyển đổi tài liệu nguồn thành các trang raster khi cần, và phục vụ các trang này qua một endpoint HTTP nhẹ được front‑end hỗ trợ tiêu thụ.
2. Cấu Hình Middleware Doconut cho Chuyển Đổi PDF trong Ứng Dụng ASP.NET Core
Bước đầu tiên là đăng ký middleware của Doconut để backend có thể phục vụ các ô ảnh tài liệu, thumbnail và dữ liệu chú thích. Điều này được thực hiện trong pipeline yêu cầu của ASP.NET Core và chỉ cần một vài đăng ký dịch vụ cho cache và ngữ cảnh yêu cầu.
Đăng ký middleware
Thêm các dịch vụ cần thiết (distributed memory cache và HTTP context accessor) trong ConfigureServices. Sau đó, trong Configure, ánh xạ endpoint Doconut (thông thường là DocImage.axd) tới middleware Doconut. Các tùy chọn middleware cho phép bạn áp dụng việc render an toàn và ẩn các chẩn đoán nội bộ khỏi người dùng cuối.
Khởi tạo giấy phép
Doconut yêu cầu một file license khi khởi động. Cách thường dùng là nhúng license như một resource và tải nó dưới dạng stream khi ứng dụng bắt đầu. Khi stream license được cung cấp cho instance trình xem Doconut, SDK sẽ được kích hoạt hoàn toàn và sẵn sàng xử lý tài liệu.
Mở tài liệu và nhận token
Khi người dùng yêu cầu một tài liệu, backend mở tệp thông qua API của Doconut, cung cấp các tham số tùy chọn như bảo mật mật khẩu, độ phân giải ảnh và thời gian chờ. Doconut trả về một token ngắn (thường là GUID) đại diện duy nhất cho tài liệu đã mở. Front‑end sẽ bao gồm token này trong mọi yêu cầu ô ảnh, ví dụ /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Cung Cấp API Stream Tài Liệu An Toàn cho Các Framework JavaScript
Mặc dù Doconut đã cung cấp một handler ô ảnh cấp thấp qua middleware, hầu hết các nhóm thích một controller wrapper mỏng để thêm xác thực, ghi log và tùy chọn watermark.
Các trách nhiệm điển hình của controller
- Endpoint mở – Nhận một định danh tài liệu, xác định đường dẫn tệp thực tế, gọi Doconut để mở tài liệu và trả về token đã tạo.
- Endpoint thumbnail – Trả về một PNG nhỏ cho một trang nhất định, hữu ích cho thanh điều hướng. Controller có thể chỉ đơn giản chuyển hướng tới handler ô ảnh của Doconut với query string phù hợp.
Các cân nhắc bảo mật
Lưu token trong session của người dùng hoặc nhúng nó vào một claim JWT ngắn hạn. Vì token một mình không thể truy xuất tệp gốc nếu không có cache phía server, tài liệu vẫn được bảo vệ. API REST này hỗ trợ các mẫu tích hợp React, Angular và Vue được mô tả trong hướng dẫn.
4. Nhúng Trình Xem vào Ứng Dụng React
Các nhà phát triển React có thể tạo một functional component thực hiện:
- Gọi endpoint
/openđể lấy token cho tài liệu yêu cầu. - Xây dựng một mảng URL ảnh trỏ tới handler ô ảnh của Doconut cho mỗi trang (bạn có thể bắt đầu với mười trang đầu và tải thêm khi cần).
- Render các trang dưới dạng phần tử
<img>, xử lý sự kiện scroll hoặc zoom bằng cách cập nhật các tham số URL.
Tương tác với các điểm tích hợp JavaScript của Doconut
Doconut chèn một helper JavaScript nhẹ vào trang. Thông qua helper này, bạn có thể thực hiện các lệnh như:
- Highlight một thuật ngữ – yêu cầu tìm kiếm toàn văn trên tài liệu và làm nổi bật các từ khớp.
- Thêm chú thích – đặt một sticky note, dấu, hoặc bản vẽ trên một trang cụ thể bằng cách gửi payload JSON bao gồm số trang, loại chú thích, tọa độ và bất kỳ dữ liệu bổ sung nào.
Vì công việc render nặng được thực hiện trên server, bundle React vẫn nhỏ và UI phản hồi nhanh.
5. Nhúng Trình Xem vào Angular và Vue – Mẫu Component Tái Sử Dụng
Angular
Tạo một Angular service phản ánh API .NET nhỏ gọn (mở tài liệu, lấy thumbnail). Service sử dụng HttpClient để gọi các endpoint backend và trả về token dưới dạng observable.
Sau đó xây dựng một component, khi khởi tạo, yêu cầu token, tạo URL ảnh các trang và hiển thị chúng bằng *ngFor. Component có thể cung cấp các nút gọi helper JavaScript của Doconut để thực hiện chú thích và tìm kiếm, tương tự ví dụ React.
Vue
Trong Vue, định nghĩa một component sử dụng lifecycle hook created để yêu cầu token qua fetch hoặc axios. Lưu token và các URL trang đã tạo trong đối tượng data của component. Render các trang bằng vòng lặp v-for. Tính phản ứng của Vue giúp cập nhật giao diện dễ dàng khi người dùng scroll, zoom hoặc kích hoạt hành động chú thích thông qua tích hợp JavaScript của Doconut.
Cả ba framework đều chia sẻ cùng một hợp đồng backend, vì vậy bạn có thể tái sử dụng cùng một controller ASP.NET Core mà không cần thay đổi.
Kết Luận
Việc nhúng một trình xem tài liệu đầy đủ tính năng không còn đòi hỏi một loạt plugin của bên thứ ba hay dịch vụ đám mây tốn kém. Với Doconut, các nhà phát triển nhận được một thư viện phía server duy nhất, render PDF, Office và CAD, cung cấp chú thích, tìm kiếm dựa trên OCR và in ấn có kiểm soát — tất cả trong khi giữ tài liệu an toàn và có khả năng mở rộng.
Sẵn sàng nâng tầm trải nghiệm tài liệu trong ứng dụng .NET, React, Angular hoặc Vue của bạn? Hãy thử Doconut ngay hôm nay và xem bạn có thể nhanh chóng triển khai một trình xem doanh nghiệp chuyên nghiệp mà người dùng sẽ yêu thích.