Làm cách nào để sử dụng Bootstrap trong PDF?

Trong bài viết này (đọc trong bốn phút), bạn sẽ tìm hiểu cách nhanh chóng xây dựng trình xem PDF bằng Bootstrap và PDF. js, trình xem PDF mã nguồn mở phổ biến

Đây là những gì chúng ta sẽ xây dựng

Mã nguồn cho dự án này có sẵn trong repo Git của chúng tôi

điều kiện tiên quyết

Bước 1 - Cài đặt máy chủ http

Chúng tôi sẽ sử dụng để chạy trang web của chúng tôi tại địa phương. Để cài đặt http-server, hãy chạy lệnh sau từ Nút. dòng lệnh js

Bước 2 - Tạo thư mục dự án

Bây giờ chúng tôi sẽ tạo một thư mục dự án đơn giản cho dự án Bootstrap của chúng tôi. Trong thư mục dự án của bạn, hãy tạo một cấu trúc thư mục trông giống như thế này

Tất cả các tệp này sẽ trống ngay bây giờ. Chúng tôi sẽ sớm phổ biến chúng với nội dung

Bước 3 - Triển khai PDF. js

Bây giờ chúng tôi sẽ tích hợp PDF mã nguồn mở. js vào dự án của chúng tôi để hiển thị tệp PDF bên trong ứng dụng của chúng tôi. Chúng tôi sẽ bắt đầu từ GitHub và sau đó trích xuất nội dung vào thư mục public/lib

Chúng tôi cũng sẽ cần một tệp PDF để xem, chúng tôi sẽ đặt tệp này trong thư mục web. Bạn có thể sử dụng của riêng bạn hoặc tải xuống từ đây

Cấu trúc tệp mới trong thư mục dự án của chúng tôi sẽ giống như sau

Bước 4 - Tạo dự án

Tiếp theo, chúng tôi sẽ tạo nó để chúng tôi có thể xem trình xem mặc định trong dự án của mình. Trong public/index.html thêm vào như sau

Trong public/form.html thêm vào như sau

Đồng thời thêm vào public/pdftron.html những điều sau đây

Đảm bảo thay đổi tên tệp PDF bằng cách thêm các tệp PDF tùy chỉnh vào thư mục lib/web và thay đổi tất cả các tệp .html bằng cách thay thế phần sau bằng tên tệp PDF của bạn

Chúng tôi đang nhập Bootstrap từ mạng phân phối nội dung bằng cách thêm phần sau vào phần

Bootstrap là một hệ thống lưới dựa trên việc chia trang thành 12 cột, vì vậy việc thêm lớp col-sm-6 có nghĩa là phần tử sẽ chiếm sáu trong số 12 cột khi kích thước màn hình nhỏ (lớn hơn 575px nhưng nhỏ hơn 766px). Nó sẽ tiếp tục sử dụng 6 cột cho kích thước màn hình lớn hơn mức này nhưng khi được coi là cực nhỏ (dưới 576px), nó sẽ mặc định sử dụng tất cả 12 cột. Điều này là do chúng tôi chưa chỉ định bất kỳ hành vi nào cho các kích thước màn hình cực nhỏ. Bạn có thể tìm hiểu thêm về

Thêm các lớp nav nav-tabs vào một

    tự động tạo kiểu cho các tab trông giống như một tiêu đề. Để thêm các mục vào tiêu đề, chỉ cần thêm lớp nav-item vào phần tử con
  • Chúng ta cũng có thể hiển thị chúng ta đang ở trang nào bằng cách thêm lớp public/lib0 vào
  • cũng. Ngoài ra, việc thêm lớp public/lib1 sẽ khiến tab trông giống như không thể truy cập được. Bạn có thể đọc thêm về khác

    Tương tự, việc thêm các lớp public/lib2 sẽ tạo bảng điều khiển ở bên phải của PDF. trình xem js. Việc thêm các lớp public/lib3 và public/lib4 vào các phần tử con của phần tử bảng điều khiển sẽ thêm tiêu đề và tiêu đề tương ứng. Bạn cũng có thể ra lệnh cho phần thân bằng cách thêm lớp public/lib5. Nếu bạn muốn tìm hiểu thêm về

    Điều hướng đến http. //máy chủ cục bộ. 8080/ và bạn sẽ thấy trình xem mặc định và một số tab điều hướng thay đổi PDF được hiển thị

    Làm cách nào để sử dụng Bootstrap trong PDF?

    Bước cuối cùng, chúng ta sẽ sắp xếp lại thanh công cụ bằng cách di chuyển các phần tử xung quanh, xóa các nút và thay đổi các biểu tượng

    Hãy mở public/lib6 và thêm phần sau vào phần

    Tiếp theo, chúng tôi sẽ tạo public/lib7 bên trong thư mục public/lib8 và thêm đoạn mã sau

    PDF. thanh công cụ chính của js được chia thành 3 vùng

    Làm cách nào để sử dụng Bootstrap trong PDF?

    Thanh công cụ phụ được truy cập thông qua biểu tượng chữ V ở vùng bên phải

    Làm cách nào để sử dụng Bootstrap trong PDF?

    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 public/lib9 trong public/lib7. 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 public/index.html1 đến khu vực giữa, bạn sẽ thay thế public/index.html2 bằng public/index.html3 hoặc public/index.html4 cho khu vực bên phải. Để di chuyển một công cụ khác, hãy thay thế ID public/index.html1 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ế public/index.html6 hoặc public/index.html7 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 public/index.html8, như thế này

    Trong ví dụ trên, public/index.html9 là ID phần tử, trong khi public/form.html0 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ụ IconID
    Làm cách nào để sử dụng Bootstrap trong PDF?
    thanh bênChuyển đổi
    Làm cách nào để sử dụng Bootstrap trong PDF?
    viewFind
    Làm cách nào để sử dụng Bootstrap trong PDF?
    số trang
    Làm cách nào để sử dụng Bootstrap trong PDF?
    numPages
    Làm cách nào để sử dụng Bootstrap trong PDF?
    zoomOut
    Làm cách nào để sử dụng Bootstrap trong PDF?
    zoomIn
    Làm cách nào để sử dụng Bootstrap trong PDF?
    next
    Làm cách nào để sử dụng Bootstrap trong PDF?
    previous
    Làm cách nào để sử dụng Bootstrap trong PDF?
    presentationMode
    Làm cách nào để sử dụng Bootstrap trong PDF?
    openFile
    Làm cách nào để sử dụng Bootstrap trong PDF?
    print
    Làm cách nào để sử dụng Bootstrap trong PDF?
    download
    Làm cách nào để sử dụng Bootstrap trong PDF?
    viewBookmark
    Làm cách nào để sử dụng Bootstrap trong PDF?
    secondaryToolbarToggle
    Làm cách nào để sử dụng Bootstrap trong PDF?
    scaleSelectContainer
    Làm cách nào để sử dụng Bootstrap trong PDF?
    secondaryPresentationMode
    Làm cách nào để sử dụng Bootstrap trong PDF?
    secondaryOpenFile
    Làm cách nào để sử dụng Bootstrap trong PDF?
    secondaryPrint
    Làm cách nào để sử dụng Bootstrap trong PDF?
    secondaryDownload
    Làm cách nào để sử dụng Bootstrap trong PDF?
    secondaryViewBookmark
    Làm cách nào để sử dụng Bootstrap trong PDF?
    firstPage
    Làm cách nào để sử dụng Bootstrap trong PDF?
    lastPage
    Làm cách nào để sử dụng Bootstrap trong PDF?
    pageRotateCw
    Làm cách nào để sử dụng Bootstrap trong PDF?
    pageRotateCcw
    Làm cách nào để sử dụng Bootstrap trong PDF?
    cursorSelectTool
    Làm cách nào để sử dụng Bootstrap trong PDF?
    cursorHandTool
    Làm cách nào để sử dụng Bootstrap trong PDF?
    scrollVertical
    Làm cách nào để sử dụng Bootstrap trong PDF?
    scrollHorizontal
    Làm cách nào để sử dụng Bootstrap trong PDF?
    scrollWrapped
    Làm cách nào để sử dụng Bootstrap trong PDF?
    spreadNone
    Làm cách nào để sử dụng Bootstrap trong PDF?
    spreadOdd
    Làm cách nào để sử dụng Bootstrap trong PDF?
    spreadEven
    Làm cách nào để sử dụng Bootstrap trong PDF?
    documentProperties

    Phần kết luận

    Như bạn có thể thấy, hiển thị tệp PDF bằng Bootstrap không khó khi sử dụng các thư viện mã nguồn mở

    Xây dựng Trình xem PDF bằng Bootstrap tương đối đơn giản, nhưng một khi bạn muốn bắt đầu chú thích, ký tên hoặc điền vào biểu mẫu, bạn sẽ phải tự thực hiện những điều này. Xem bản PDF của chúng tôi. js Build vs Buy và Hướng dẫn đánh giá PDF. js để tìm hiểu thêm

    Đó là nơi PDF. js Express xuất hiện. Đó là một bản PDF thương mại. js bao bọc giao diện người dùng dựa trên React xung quanh PDF nguồn mở. js và cung cấp các tính năng vượt trội như chú thích, điền biểu mẫu và chữ ký điện tử. Nó hoàn toàn tương thích với nhiều khung công tác -- hãy xem bản trình diễn và cho chúng tôi biết suy nghĩ của bạn

    Nếu bạn cần hiển thị độ trung thực cao, tăng độ tin cậy và hiệu suất nhanh hơn, bạn có thể xem xét PDFTron WebViewer. Đó là một thư viện PDF JavaScript tích hợp với nhiều khung và cung cấp hàng trăm tính năng, như chỉnh sửa, chỉnh sửa, thao tác trang, cộng tác tài liệu theo thời gian thực, chữ ký điện tử, v.v. Kiểm tra bản trình diễn WebViewer

    Nếu bạn có bất kỳ câu hỏi nào về việc triển khai PDF. js Express trong dự án của bạn, vui lòng liên hệ với chúng tôi và chúng tôi sẽ sẵn lòng trợ giúp

    Làm cách nào để nhúng PDF vào Bootstrap?

    Đây là một ví dụ đơn giản sử dụng Bọc Trong đó. (*) là số .

    Làm cách nào để hiển thị PDF ở chế độ Bootstrap?

    "Hiển thị PDF trong chế độ xem trước cửa sổ bật lên bằng Bootstrap Easy Modal Plugin" .

    Hiển thị PDF trong chế độ xem trước cửa sổ bật lên bằng Bootstrap Easy Modal Plugin

    .

    Làm cách nào để đưa Bootstrap vào tệp HTML?

    Sử dụng một trong ba phương pháp sau để thêm Bootstrap vào HTML. .
    Phương pháp 1. Sử dụng Mạng phân phối nội dung Bootstrap (CDN)
    Phương pháp 2. Tải xuống tệp cục bộ
    Phương pháp 3. Sử dụng trình quản lý gói để nhập Bootstrap sang HTML
    Ví dụ từ Creative Tim
    Phần kết luận

    Làm cách nào để làm cho iframe PDF phản hồi nhanh?

    Tất cả những gì bạn cần làm là thêm #view=fitH vào cuối thuộc tính nguồn . Đó là nó. fitH là viết tắt của fit vertical và điều này sẽ làm cho tệp PDF trong khung nội tuyến của chúng tôi vừa với chiều rộng của màn hình.