Cách Các Nhà Phát Triển Nhúng Xem PDF, Office và CAD vào Ứng Dụng Web .NET, React, Angular hoặc Vue để Tăng Tính Thân Thiện và Hiệu Quả cho Người Dùng: Từng Bước
Nếu bạn đang cố biến một ứng dụng .NET nặng tài liệu thành một thứ 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 trình chiếu 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. Nó 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 nguyên bản, tìm kiếm toàn văn (bao gồm OCR) và in kiểm soát ngay từ đầu. Trong hướng dẫn này, chúng tôi sẽ đi qua toàn bộ quy trình: từ việc cấu hình engine chuyển đổi của Doconut trong back‑end ASP.NET Core, đến việc nhúng trình xem vào 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 bắt đầu.
1. Tại sao một Trình Xem Đặc Thù lại Quan Trọng đối với Ứng Dụng Web Doanh Nghiệp
Chi phí ẩn của “download‑and‑open”
Phần lớn các cổng thông tin lạc hậu chỉ đơn giản là đặt một liên kết tới tệp trên một chia sẻ. Nhấp vào nó sẽ tải tệp xuống hoặc chuyển nó cho một chương trình được cài đặt cục bộ. Trên 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 cổng, mở tài liệu trong một cửa sổ riêng, và sau đó phải nhớ mình đã ở đâu.
- Kết xuất không nhất quán – các trình xem Word, Excel và CAD được cài đặt cục bộ có thể diễn giải tệp khác nhau, dẫn đến 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 phòng ngừa mất dữ liệu trở nên ác mộng.
- Năng suất thấp – người đánh giá 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:
- Hiển thị mọi định dạng được hỗ trợ trong trình duyệt (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Cung cấp một API sạch sẽ cho back‑end .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 kiểm soát mà không cần kéo thêm thư viện.
- Mở rộng một cách an toàn — xử lý tài liệu trên máy chủ, truyền chúng dưới dạng các ô ảnh, và không bao giờ để lộ tệp thô cho khách hàng.
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 máy chủ .NET, chuyển đổi tài liệu nguồn thành các trang raster theo yêu cầu, và phục vụ các trang đó qua một endpoint HTTP nhẹ được các tích hợp front‑end hỗ trợ sử dụng.
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 để back‑end có thể phục vụ các ô tài liệu, hình thu nhỏ 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 bộ nhớ cache và ngữ cảnh yêu cầu.
Đăng ký middleware
Thêm các dịch vụ cần thiết (bộ nhớ cache phân tán và HTTP context accessor) trong ConfigureServices. Sau đó, trong Configure, ánh xạ endpoint Doconut (thường là DocImage.axd) tới middleware Doconut. Các tùy chọn middleware cho phép bạn thực thi 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 tệp giấy phép khi khởi động. Cách tiếp cận thường là nhúng giấy phép như một tài nguyên và tải nó dưới dạng stream khi ứng dụng khởi chạy. Khi stream giấy phép được cung cấp cho thể hiện 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, back‑end mở tệp qua API của Doconut, cung cấp các tham số tùy chọn như bảo vệ bằng 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 bao gồm token này trong mỗi yêu cầu ô, ví dụ /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Cung cấp API Luồng Tài Liệu Bảo Mật cho Các Framework JavaScript
Mặc dù Doconut đã cung cấp một trình xử lý ô cấp thấp qua middleware, hầu hết các nhóm thích một controller bao bọc nhẹ, thêm xác thực, ghi log và đánh dấu watermark tùy chọn.
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 vật lý, gọi Doconut để mở tài liệu và trả về token đã tạo.
- Endpoint hình thu nhỏ – 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 trình xử lý ô của Doconut với chuỗi truy vấn phù hợp.
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 mà không có cache phía máy chủ, 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 này.
4. Nhúng Trình Xem vào Ứng Dụng React
Nhà phát triển React có thể tạo một component chức năng mà:
- 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 trình xử lý ô 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 cuộn hoặc thu phóng 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ư:
- Làm nổi bật 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 ghi chú dính, 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 máy chủ, bundle React vẫn nhỏ và giao diện người dùng 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 service Angular phản chiếu API .NET nhỏ (mở tài liệu, lấy hình thu nhỏ). Service sử dụng HttpClient để gọi các endpoint back‑end 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 các URL ảnh trang và hiển thị chúng bằng *ngFor. Component có thể hiển thị các nút gọi helper JavaScript của Doconut để 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 hook vòng đời 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 dễ dàng cập nhật giao diện khi người dùng cuộn, thu phóng 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 back‑end, 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 chỉnh sửa.
Kết luận
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 bộ sưu tập các plugin 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 có được một thư viện phía máy chủ duy nhất, có khả năng render PDF, Office và CAD, cung cấp chú thích, tìm kiếm dựa trên OCR và in 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 cao 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ể triển khai nhanh chóng một trình xem tinh tế, cấp doanh nghiệp mà người dùng sẽ yêu thích như thế nào.