EmbedPDF - Trình xem PDF JavaScript mã nguồn mở (giải pháp thay thế miễn phí cho trình xem PDF Adobe Acrobat)

• EmbedPDF là một trình xem PDF mã nguồn mở có thể dễ dàng tích hợp vào bất kỳ dự án JavaScript nào
• Tương thích với nhiều framework frontend như React, Vue, Svelte, Preact, Vanilla JS
• Bao gồm nhiều tính năng phong phú như chú thích, highlight, xóa nội dung thực sự (redaction), tìm kiếm, phóng to/thu nhỏ, xoay
• Hỗ trợ cả hiệu năng lẫn khả năng mở rộng nhờ cuộn ảo và kiến trúc plugin
• Phát hành theo giấy phép MIT, cho phép mọi người tự do sử dụng và đóng góp

---

Tổng quan dự án trình xem PDF mã nguồn mở EmbedPDF

• EmbedPDF là một trình xem PDF mã nguồn mở, độc lập với framework, có thể dễ dàng nhúng vào bất kỳ dự án JavaScript nào
• Áp dụng giấy phép MIT, đồng thời có thế mạnh về khả năng tương thích với nhiều framework frontend hiện đại như React, Vue, Svelte, Preact, Vanilla JS
• Cung cấp trải nghiệm đọc hiện đại cùng API thân thiện với lập trình viên

Tính năng chính

• Hỗ trợ chú thích: cung cấp nhiều tính năng chú thích như highlight, sticky note, văn bản tự do, ink
• Redaction thực sự: khi dùng tính năng redaction, nội dung thực trong tài liệu sẽ bị xóa hoàn toàn để đảm bảo bảo mật
• Bao gồm các thao tác PDF cốt lõi như tìm kiếm, chọn văn bản, phóng to/thu nhỏ, xoay
• Cuộn mượt và được ảo hóa giúp xem cả tài liệu lớn mà không bị giảm hiệu năng
• Kiến trúc dựa trên plugin và các plugin tree-shakeable giúp loại bỏ mã không cần thiết và đảm bảo khả năng mở rộng dễ dàng

Tài liệu và demo

• Có thể xem tài liệu chính thức, hướng dẫn cài đặt, API reference, ví dụ tại https://www.embedpdf.com
• Trong demo trực tiếp, bạn có thể tự tải lên tệp PDF hoặc trải nghiệm tính năng bằng tài liệu mẫu

Mã nguồn mở và giấy phép

• Phát hành theo giấy phép MIT, cho phép tự do sử dụng mã nguồn và đóng góp
• Có bao gồm PDFium, và phần này tuân theo Apache License 2.0

Cộng đồng và đóng góp

• Hoan nghênh tham gia cộng đồng mã nguồn mở và nhiều hình thức đóng góp khác nhau
• Có thể trao đổi với các nhà phát triển qua hướng dẫn Contributing và Github Discussions

Tầm quan trọng và điểm khác biệt của dự án

• Là giải pháp thay thế cho các trình xem PDF thương mại hiện có, cho phép bất kỳ ai dễ dàng triển khai chức năng trình xem PDF trong hệ thống nội bộ hoặc SaaS
• Khả năng tương thích cao với nhiều framework cùng cấu trúc hiện đại, mô-đun là điểm khác biệt
• Là ví dụ hiếm hoi về việc cung cấp các tính năng xử lý PDF nâng cao như redaction trong một dự án mã nguồn mở

[GN⁺]

Ý kiến trên Hacker News

• Công việc thực sự quan trọng đang được thực hiện trong PDFium; đây là dự án mà Google đã mua lại từ Foxit rồi tiếp tục tự phát triển, và hiện đang được dùng trong Chrome (không phải tôi muốn hạ thấp công việc đang được bàn luận sôi nổi này, chỉ là muốn nói rằng đây không phải một trình phân tích PDF được viết hoàn toàn mới)
  • Tôi nghĩ rất nhiều trình xem PDF, bao gồm cả các sản phẩm thương mại, được xây dựng dựa trên PDFium
• Tôi tò mò vì sao dự án này lại được phát triển dù đã có Mozilla PDF.js https://github.com/mozilla/pdf.js (không phải chỉ trích, chỉ đơn thuần là tò mò vì có rất nhiều lý do để làm lại thứ đã tồn tại)
  • Mục tiêu chính là tạo ra một trình xem PDF mà nhà phát triển có thể dễ dàng tích hợp vào website; với một số trường hợp sử dụng, PDF.js khó hoặc phức tạp để tùy biến và mở rộng
  • Nếu cần PDF markup như chú thích, hình vẽ, bình luận, thì hoặc phải tự xây dựng hoặc chỉ còn lựa chọn là các trình chỉnh sửa PDF dạng thuê bao khá đắt; tôi nghe nói với các team đã tích hợp Apryse thì riêng chi phí hỗ trợ chỉnh sửa PDF đơn giản thôi cũng đã là gánh nặng lớn
  • Chỉ nhìn lướt qua cũng có thể thấy nó có những tính năng khác với các sản phẩm hiện có, như bình luận chú thích
  • Nếu mở tài liệu demo trên iPad hoặc iPhone, có thể thấy tính năng Print Preview chỉ hoạt động trên thiết bị desktop
  • Chỉ cần nhìn vào 402 issue đang mở cũng có thể hình dung PDF phức tạp đến mức nào và phải tốn bao nhiêu công sức để xử lý hết các tính năng đó
• Tôi từng làm một side project có nhúng trình xem PDF; bản đầu dùng pdf.js nhưng khi phóng to nhanh thì bị khựng và khó giữ focus, nên tôi đã tự làm bằng C++ pdfium và render bằng Metal; có thể xem trong video demo, tôi áp dụng cách tiling để cân bằng bộ nhớ và hiệu năng; tôi không ngờ pdfium trên WebAssembly lại đạt hiệu năng tốt đến vậy, và thực ra phát triển UI trên web còn dễ hơn làm bằng C++
  • Thành thật mà nói thì demo đó có cảm giác nhanh và mượt hơn nhiều, thao tác zoom được làm rất mượt; nhìn cái này khiến tôi cũng muốn quay lại phát triển tiếp để cải thiện hiệu năng
• Tôi đang dùng pdf.js (17MB, 158 trang, nhiều hình ảnh, môi trường Windows) và muốn chia sẻ các vấn đề gặp phải khi test
  • Link không hoạt động
  • Bookmark có hiển thị nhưng không hoạt động
  • Không thể chọn văn bản trong Firefox
  • Trên Chrome, middle click (dùng để cuộn) lại dẫn đến chọn văn bản
  • Trong pdf.js thì cuộn khá ổn, nhưng ở sản phẩm này khi cuộn màn hình bị mờ trong vài trăm đến cả nghìn mili giây, chất lượng giảm rất mạnh; nếu nhảy nhiều trang bằng phím End chẳng hạn thì chỉ thấy màn hình trắng
  • Trên FF, phím lên/xuống, Page Up/Down, Home/End không hoạt động (trái/phải thì có)
• Tôi thử nhanh và xác nhận rằng trên Firefox tính năng chú thích hoàn toàn không hoạt động, nhưng trên Chrome thì underline, highlight và mọi chức năng chú thích đều hoạt động bình thường
  • Cảm ơn vì đã báo; tôi vẫn chưa test phần chú thích trên Firefox, thật may là nó hoạt động bình thường trên Chrome, tôi sẽ sớm kiểm tra
• Tôi tò mò không biết có hỗ trợ chỉnh sửa outline nhúng (chú thích) hay không; đây luôn là tính năng tôi thấy thiếu nhất ở các trình xem/chỉnh sửa PDF, và mỗi lần nhận PDF không có outline là tôi lại thấy cần tính năng này
• Với tổ hợp Linux + Firefox, các công cụ chú thích/redaction trong demo hoàn toàn không hoạt động, trong khi trên cùng máy đó với Chromium thì lại chạy tốt
  • Tôi vừa sửa xong vấn đề trên Firefox; bây giờ cả Linux + Firefox lẫn Chromium đều hỗ trợ chú thích và redaction bình thường
• Tài liệu cũng rất tốt và tôi đặc biệt thích ý tưởng thư viện React headless; có thể dễ dàng gắn UI và tính năng tùy chỉnh, và tôi muốn hỏi việc tự động highlight/gạch chân một số thuật ngữ nhất định rồi hiển thị component tùy chỉnh khi click hoặc hover thì khó đến mức nào
  • Có thể làm rất đơn giản, chúng tôi đã triển khai sẵn kiểu tính năng đó; bạn có thể render trực tiếp selectionMenu và component tùy chỉnh trong AnnotationLayer; nếu muốn đào sâu hơn thì hãy hỏi trong kênh Discord
• Sản phẩm trông rất ấn tượng; điều tôi tò mò là họ định duy trì việc phát triển một trình xem PDF miễn phí nhưng nhiều tính năng như vậy bằng cách nào, có dự định làm tính năng cho doanh nghiệp, hosting PDF hay mô hình kiếm tiền nào khác không
  • Câu trả lời cho tất cả đều là "có"; trình xem PDF phía client sẽ vẫn miễn phí + giấy phép MIT, nhưng các tính năng bổ sung như hosting PDF và phân tích/kiểm soát truy cập cho doanh nghiệp sẽ được cung cấp dưới dạng dịch vụ trả phí
• Nhìn chung hoạt động tốt, nhưng khi chuyển công cụ redaction sang chế độ xem (trong lúc vạch đỏ vẫn đang kích hoạt) thì redaction vẫn tiếp tục bật nên không thể cuộn, phải refresh mới hết
  • Đây là phản hồi rất tốt và chúng tôi sẽ sớm sửa; trên mobile, việc vô hiệu hóa cuộn trong chế độ redaction là hành vi có chủ đích để thuận tiện cho chọn vùng chính xác, nhưng khi chuyển sang tab xem thì chắc chắn phải thoát chế độ redaction; cảm ơn vì đã phát hiện ra điều này