Trong bài viết này [đọc trong ba phút], bạn sẽ học cách nhúng nhanh một tệp PDF vào một trang web bằng PDF. js, trình xem PDF mã nguồn mở phổ biến
Chúng tôi cũng sẽ sử dụng nó làm trình xem PDF toàn màn hình, nơi chúng tôi có thể chuyển tên tệp PDF qua chuỗi truy vấn URL. Dùng thử trình xem toàn màn hình tại đây
Mở PDF toàn màn hình. Trình xem jsBước 1 - Tải xuống và giải nén PDF. gói js
Hãy truy cập GitHub để tải xuống bản phát hành ổn định mới nhất và sau đó trích xuất nội dung bên trong thư mục trang web của chúng tôi
Đây là nội dung của .zip
Sau khi trích xuất nội dung .zip, thư mục trang web của chúng tôi có thể trông giống như thế này
Ghi chú. Do các hạn chế về bảo mật của trình duyệt, PDF. js không thể mở các tệp PDF cục bộ bằng URL file://. Bạn sẽ cần khởi động máy chủ web cục bộ hoặc tải tệp lên máy chủ web của mình
Bước 2 - Nhúng Trình xem PDF vào Trang web
Bước cuối cùng của chúng tôi là nhúng trình xem vào trang web của chúng tôi bằng cách sử dụng một . Chúng tôi sẽ sử dụng một chuỗi truy vấn để cho người xem PDF biết tệp PDF nào sẽ mở. Như thế này
Bạn đã hoàn tất
Nếu bạn muốn tải tệp PDF từ một tên miền khác, bạn cần đảm bảo máy chủ lưu trữ tệp PDF đã được thiết lập cho CORS
Trình xem PDF toàn màn hình
Ngoài việc nhúng trình xem vào một trang, chúng tôi cũng có thể mở nó ở chế độ toàn màn hình
Mở PDF toàn màn hình. Trình xem jsĐây là mã
Chỉ cần thay đổi tham số chuỗi truy vấn file để mở bất kỳ tệp PDF nào bạn muốn mở
Chúng ta cũng có thể sắp xếp lại thanh công cụ bằng cách di chuyển các thành phần xung quanh, loại bỏ các nút và thay đổi các biểu tượng
Hãy mở public/lib/web/viewer.html và thêm phần sau vào phần
Tiếp theo, chúng tôi sẽ tạo customToolbar.js bên trong thư mục public/lib/web và thêm đoạn mã sau
PDF. thanh công cụ chính của js được chia thành 3 vùng
Thanh công cụ phụ được truy cập thông qua biểu tượng chữ V ở vùng bên phải
Chúng ta có thể di chuyển các thành phần từ thanh công cụ phụ vào vùng bên trái, giữa hoặc bên phải của thanh công cụ chính bằng hàm addElemFromSecondaryToPrimary trong customToolbar.js. Ví dụ: bỏ ghi chú dòng này sẽ di chuyển công cụ xoay ngược chiều kim đồng hồ sang vùng bên trái của thanh công cụ chính
Thay vào đó, nếu bạn muốn chuyển .zip1 sang khu vực giữa, bạn sẽ thay thế .zip2 bằng .zip3 hoặc .zip4 cho khu vực bên phải. Để di chuyển một công cụ khác, hãy thay thế ID .zip1 bằng ID phần tử bạn muốn di chuyển. [Xem bên dưới để biết danh sách đầy đủ các ID phần tử. ]
Chúng ta cũng có thể ẩn các phần tử như thế này
Để ẩn các phần tử khác nhau, hãy thay thế .zip6 hoặc .zip7 bằng ID phần tử
GHI CHÚ. Ẩn các nút tải xuống và in không phải là cách hiệu quả để bảo vệ tệp PDF của chúng tôi, vì vẫn có thể xem mã nguồn để tìm tệp. Nó chỉ làm cho nó khó hơn một chút
Chúng tôi cũng có thể tùy chỉnh các biểu tượng cho các công cụ khác nhau bằng cách hoán đổi tệp .zip8, như thế này
Trong ví dụ trên, .zip9 là ID phần tử, trong khi file://0 là đường dẫn đến biểu tượng công cụ
Và đó là nó
Tham chiếu ID phần tử cho PDF. js Tùy chỉnh giao diện người dùng
Đây là tài liệu tham khảo hữu ích với ID của các biểu tượng thanh công cụ khác nhau
Thanh công cụ IconIDthanh bênChuyển đổiviewFindsố trangnumPageszoomOutzoomInnextpreviouspresentationModeopenFileprintdownloadviewBookmarksecondaryToolbarTogglescaleSelectContainersecondaryPresentationModesecondaryOpenFilesecondaryPrintsecondaryDownloadsecondaryViewBookmarkfirstPagelastPagepageRotateCwpageRotateCcwcursorSelectToolcursorHandToolscrollVerticalscrollHorizontalscrollWrappedspreadNonespreadOddspreadEvendocumentPropertiesBước tiếp theo
Bây giờ bạn đã có tệp PDF của mình. js đã được thiết lập và chạy, hãy xem xét các hướng dẫn sau
Phần kết luận
Như bạn có thể thấy, xây dựng trình xem PDF cơ bản với PDF. js khá đơn giản. Nếu bạn yêu cầu các khả năng bổ sung, như chú thích PDF, điền biểu mẫu hoặc chữ ký điện tử, hãy xem xét PDF. js Express, cung cấp tệp PDF. trình xem dựa trên js với chú thích dùng ngay, điền biểu mẫu PDF và ký tên