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ị
Xem PDF