Hướng dẫn how do i view a pdf in javascript? - làm cách nào để xem pdf bằng javascript?

Định dạng tài liệu di động, hoặc viết tắt là PDF là lý tưởng để chia sẻ các tài liệu chứa nhiều văn bản và hình ảnh được định dạng chính xác, đặc biệt nếu chúng có thể được in hoặc đọc ngoại tuyến. Mặc dù hầu hết các trình duyệt hiện đại có thể hiển thị các tệp PDF, nhưng họ thực hiện bằng cách sử dụng trình xem PDF chạy trong một tab hoặc cửa sổ độc lập, buộc người dùng phải rời khỏi trang web của bạn.

Pdf.js & nbsp; là một thư viện JavaScript nguồn mở cho phép bạn phân tích và hiển thị các tệp PDF ngay bên trong các trang web của bạn. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng nó để tạo trình xem PDF JavaScript tùy chỉnh đầy đủ từ đầu.

Nếu bạn đang thêm trình xem PDF vào trang web của mình, bạn cũng có thể quan tâm đến một plugin Flipbook chuyên nghiệp. .

1. & NBSP; Tạo giao diện người dùng Creating a User Interface

Hãy bắt đầu bằng cách tạo một trang web mới và thêm mã Boiler HTML5 thông thường vào nó.

Tiếp theo, bên trong & nbsp; ____ ____ 24, tạo một phần tử A & nbsp; ____ 25 & nbsp; có thể đóng vai trò là một thùng chứa cho trình xem pdf của chúng tôi.

Trình xem PDF JavaScript của chúng tôi sẽ là một html5 & nbsp; ____ ____ 26 & nbsp; phần tử. Chúng tôi sẽ hiển thị các trang của các tệp PDF của chúng tôi bên trong nó. Vì vậy, thêm mã sau bên trong phần tử & nbsp; ____ 25 & nbsp;

Để giữ cho mọi thứ đơn giản, chúng tôi sẽ chỉ hiển thị một trang bên trong khung vẽ tại bất kỳ thời điểm nào. Tuy nhiên, chúng tôi sẽ cho phép người dùng chuyển sang trang trước hoặc trang tiếp theo bằng cách nhấn nút. Ngoài ra, để hiển thị số trang hiện tại và để cho phép người dùng nhảy đến bất kỳ trang nào họ mong muốn, giao diện của chúng tôi sẽ có trường đầu vào.

    Previous
    
    Next

Để hỗ trợ các hoạt động zoom, hãy thêm hai nút nữa vào giao diện: một để phóng to và một để phóng to.

  
    +
    -

Ở cuối phần này, mã trang web trông như thế này.

 


  
  
  


     

        

            
        

        

            Previous
            
            Next
        

        
  
            +
            -
        
    

2. & nbsp; nhận pdf.js Getting PDF.js

Bây giờ, giao diện người dùng xương trần cho trình xem PDF JavaScript của chúng tôi đã sẵn sàng, hãy thêm pdf.js vào trang web của chúng tôi. Bởi vì phiên bản mới nhất của thư viện có sẵn trên & nbsp; cdnjs, chúng tôi có thể làm như vậy bằng cách thêm các dòng sau vào cuối trang web.

Nếu bạn thích sử dụng & nbsp; một bản sao cục bộ của thư viện, bạn có thể tải xuống từ kho lưu trữ & nbsp; pdfjs-dist & nbsp;

3. & nbsp; tải tệp pdf Loading a PDF File

Trước khi chúng tôi bắt đầu tải tệp PDF, hãy tạo một đối tượng JavaScript đơn giản để lưu trữ trạng thái của trình xem PDF của chúng tôi. Bên trong nó, chúng tôi sẽ có ba mục: tham chiếu đến chính tệp PDF, chỉ mục trang hiện tại và mức thu phóng hiện tại.

Tại thời điểm này, chúng tôi có thể tải tệp PDF của mình bằng cách gọi & nbsp; ________ 28 & nbsp; Phương thức của & nbsp; ____ 29 & nbsp; đối tượng, chạy không đồng bộ.

pdfjsLib.getDocument('./my_document.pdf').then((pdf) => {
 
    // more code here
 
});

Lưu ý rằng phương thức & nbsp; Điều này có nghĩa là & nbsp; tệp phải có mặt trên máy chủ web của riêng bạn hoặc trên máy chủ cho phép các yêu cầu có nguồn gốc chéo.

Nếu bạn không có tệp PDF tiện dụng, bạn có thể nhận được cái tôi đang sử dụng từ Wikipedia.

Khi tệp PDF đã được tải thành công, chúng tôi có thể cập nhật tài sản & nbsp; ____ 32 & nbsp; của đối tượng trạng thái của chúng tôi.

myState.pdf = pdf;

Cuối cùng, thêm một cuộc gọi vào một hàm có tên & nbsp; ____ 33 & nbsp; để trình xem PDF của chúng tôi tự động hiển thị trang đầu tiên của tệp PDF. Chúng tôi sẽ xác định chức năng trong bước tiếp theo.

4. & nbsp; hiển thị một trang Rendering a Page

Bằng cách gọi & nbsp; ________ 34 & nbsp; Phương thức của & nbsp; ________ 32 đối tượng và chuyển một số trang cho nó, chúng tôi có thể nhận được tham chiếu đến bất kỳ trang nào trong tệp PDF. Hiện tại, chúng ta hãy vượt qua tài sản & nbsp; ____ 36 & nbsp; của đối tượng trạng thái của chúng ta cho nó. Phương pháp này cũng trả lại một lời hứa, vì vậy chúng tôi sẽ cần một chức năng gọi lại để xử lý kết quả của nó.

Theo đó, tạo một chức năng mới có tên & nbsp; ____ 33 & nbsp; chứa mã sau:

Để thực sự hiển thị một trang, chúng ta phải gọi & nbsp; ____ 33 & nbsp; Phương thức của & nbsp; ________ 39 & nbsp; đối tượng có sẵn bên trong cuộc gọi lại. Như các đối số, phương thức mong đợi bối cảnh 2D của khung vẽ của chúng tôi và A & nbsp; ________ 40 & nbsp; đối tượng mà chúng ta có thể nhận được bằng cách gọi & nbsp; ____ 41 & nbsp; phương thức. Bởi vì phương thức & nbsp; ____ 41 & nbsp; mong đợi mức thu phóng mong muốn như một đối số, chúng ta phải vượt qua & nbsp; ____ 43 & nbsp; thuộc tính của đối tượng trạng thái của chúng ta cho nó.

Kích thước của chế độ xem phụ thuộc vào kích thước ban đầu của trang và mức thu phóng. Để đảm bảo rằng toàn bộ chế độ xem được hiển thị trên khung vẽ của chúng tôi, giờ đây chúng tôi phải thay đổi kích thước của khung vẽ của chúng tôi để phù hợp với chế độ xem. Đây là cách:

Tại thời điểm này, chúng ta có thể đi trước và hiển thị trang.

Đặt tất cả lại với nhau, toàn bộ mã nguồn trông như thế này.

Nếu bạn thử mở trang web trong trình duyệt, giờ đây bạn sẽ có thể xem trang đầu tiên của tệp PDF của bạn.

Bạn có thể nhận thấy rằng kích thước của trình xem PDF của chúng tôi hiện đang phụ thuộc vào kích thước của trang được hiển thị và mức thu phóng. Điều này không lý tưởng vì chúng tôi không muốn bố cục của trang web của chúng tôi bị ảnh hưởng trong khi người dùng tương tác với trình xem PDF. & NBSP;

Để khắc phục điều này, tất cả những gì chúng ta cần làm là đưa ra một chiều rộng và chiều cao cố định cho phần tử & nbsp; Thuộc tính này, khi cần thiết, thêm các thanh cuộn vào phần tử & nbsp; ________ 25 & nbsp;, cho phép người dùng cuộn cả theo chiều ngang và chiều dọc.

Thêm mã sau bên trong & nbsp; ____ 48 & nbsp; thẻ của trang web:

Tất nhiên, bạn tự do thay đổi chiều rộng và chiều cao hoặc thậm chí sử dụng các truy vấn phương tiện để thực hiện & nbsp; ________ 25 & nbsp; phần tử phù hợp với yêu cầu của bạn.

Tùy chọn, bạn có thể bao gồm các quy tắc & NBSP; CSS sau đây để tạo phần tử & nbsp; ____ 25 & nbsp; có vẻ khác biệt hơn:

Nếu bạn làm mới trang web ngay bây giờ, bạn sẽ thấy một cái gì đó như thế này trên màn hình của bạn:

5. & nbsp; thay đổi trang hiện tại Changing the Current Page

Trình xem JavaScript & NBSP; PDF hiện chỉ có khả năng hiển thị trang đầu tiên của bất kỳ tệp PDF nào được cung cấp cho nó. Để cho phép người dùng thay đổi trang được hiển thị, bây giờ chúng tôi phải thêm trình nghe sự kiện nhấp vào & nbsp; ____ 51 & nbsp; và & nbsp;

Bên trong trình nghe sự kiện của nút & nbsp; Sau khi chúng tôi làm như vậy, chúng tôi chỉ cần gọi & nbsp; ________ 33 & nbsp; chức năng một lần nữa để hiển thị trang mới.

Ngoài ra, chúng tôi phải cập nhật giá trị của trường & nbsp; ____ 57 & nbsp; trường để hiển thị số trang mới. Mã sau đây cho bạn biết cách:

Tương tự, bên trong trình nghe sự kiện của nút & nbsp; ________ 52 & nbsp; Các & nbsp; ____ ____ 61 & nbsp; đối tượng.

Cuối cùng, chúng tôi phải thêm trình nghe sự kiện nhấn phím vào & nbsp; ________ 57 & nbsp; Bên trong trình nghe sự kiện, chúng tôi cần đảm bảo rằng số người dùng đã nhập vừa lớn hơn 0 và nhỏ hơn hoặc bằng hoặc NBSP; ________ 60 & nbsp; thuộc tính.Enter key. Inside the event listener, we need to make sure that the number the user has entered is both greater than zero and less than or equal to the 

Trình xem PDF của chúng tôi hiện có thể hiển thị bất kỳ trang nào của tệp PDF.

6. & nbsp; thay đổi mức độ zoom Changing the Zoom Level

Bởi vì chức năng của chúng tôi & nbsp;

Bên trong trình nghe sự kiện đang nhấp chuột của & nbsp; ____ ____ 66 & nbsp; nút, hãy tăng & nbsp; ____ 43 & nbsp; tài sản của & nbsp; ________ 68.

Và bên trong trình nghe sự kiện đang nhấp chuột của & nbsp; ____ ____ 69 & nbsp; nút, hãy giảm & nbsp; ____ 43 & nbsp; tài sản của & nbsp; ________ 68.

Bạn có thể tự do thêm giới hạn trên và dưới vào & nbsp; ________ 43 & nbsp; tài sản, nhưng chúng không bắt buộc.

Đây là những gì nó trông giống như khi tất cả được kết hợp với nhau.

Trình xem PDF của chúng tôi đã sẵn sàng. Nếu bạn làm mới trang web một lần nữa, bạn sẽ có thể xem tất cả các trang có trong tệp PDF và cũng phóng to hoặc phóng to chúng.

Plugin flipbook cao cấp từ Codecanyon

Bạn cũng có thể quan tâm đến một plugin flipbook chuyên nghiệp. & NBSP; JavaScript Flipbooks giới thiệu nội dung của bạn ở dạng flipbook kỹ thuật số, sử dụng các hiệu ứng lật trang, phóng to và hỗ trợ cho nhiều loại nội dung. Codecanyon là một thị trường cho tất cả các loại mã, bao gồm & nbsp; các tiện ích JavaScript cao cấp và các plugin jQuery. Đó là nơi tốt nhất để tìm các plugin Flipbook jQuery.

Hãy đi sâu vào năm plugin Flipbook hàng đầu mà bạn có thể mua từ Codecanyon:

1. Wowbook, một plugin JQuery Flipbook

Wowbook được đặt tên một cách thích hợp. Trình xem PDF JavaScript này có thể thích ứng và dễ sử dụng. Nó bao gồm ba bản demo đã sẵn sàng để bạn sử dụng khi bạn thiết lập chúng. Nó cũng đáp ứng, vì vậy PDF của bạn sẽ trông tuyệt vời trên nhiều kích thước màn hình.

2. Cú lật kim cương: Truy vấn

Có một lý do tại sao Diamond Flipbook được đánh giá rất cao. Đó là một người xem đơn giản trông tuyệt vời trên trang web của bạn. Nó không đi với trình phát flash đã lỗi thời và có thể hỗ trợ số lượng trang không giới hạn. Bạn cũng sẽ thích tải lười biếng giữ cho trang web của bạn và pdf tải nhanh.

3. JQuery flipbook đáp ứng

Được điều khiển hoàn toàn bởi HTML và JQuery, bản tải xuống Flipbook đáp ứng này là hoàn hảo cho PDFS. Nó đi kèm với các tính năng zoom, cũng như:

• mục lục
• Thích nghi với thiết bị di động
• trang hai
• hỗ trợ video
• Hơn 30 mẫu nền

Nếu bạn cần một trình xem PDF JavaScript chứa đầy các tính năng cho bạn và khách truy cập của trang web của bạn, hãy thử JQuery flipbook đáp ứng.

4. tờ báo Flipbook JQuery

Tờ báo Flipbook là một trình xem pdf jQuery hàng đầu trên Codecanyon. Tải xuống này không chỉ bao gồm hỗ trợ miễn phí, mà còn đi kèm với các bản cập nhật miễn phí để nội dung của bạn trông đẹp nhất. Nó hỗ trợ các ngôn ngữ và tài liệu từ phải sang trái. Bạn cũng có thể thêm các trang riêng lẻ dưới dạng JPG trong mã HTML.

5. Plugin JQuery Flipbook Real3D

Chúng tôi làm tròn danh sách các plugin Flipbook cao cấp của chúng tôi với Flipbook Real3D. Đó là một trình xem pdf jQuery có nhiều phong cách. Bạn có thể chọn từ:

• Điện thoại di động được tối ưu hóa
• Các biểu tượng sẵn sàng cho võng mạc
• hoàn toàn tùy biến

Kiểm tra các bản demo trực tuyến và bạn sẽ thấy lý do tại sao đó là một plugin JQuery Flipbook được xếp hạng hàng đầu để thử vào năm 2021.

Sự kết luận

Bây giờ bạn đã biết cách sử dụng pdf.js để tạo trình xem JavaScript & NBSP; PDF tùy chỉnh cho trang web của bạn. Với nó, bạn có thể tự tin cung cấp trải nghiệm người dùng liền mạch trong khi hiển thị tài liệu quảng cáo của tổ chức, giấy trắng, biểu mẫu và các tài liệu khác thường được phân phối dưới dạng các bản sao cứng.

Bạn có thể & nbsp; tìm hiểu thêm về pdf.js trên repo github chính thức.

Bạn cũng có thể quan tâm đến một plugin flipbook chuyên nghiệp. & NBSP; JavaScript Flipbooks giới thiệu nội dung của bạn ở dạng flipbook kỹ thuật số, sử dụng các hiệu ứng lật trang, phóng to và hỗ trợ cho nhiều loại nội dung. Codecanyon là một thị trường cho tất cả các loại mã, bao gồm & nbsp; các tiện ích JavaScript cao cấp và các plugin jQuery. Đó là nơi tốt nhất để tìm các plugin Flipbook jQuery.

Bạn có thấy bài đăng này hữu ích?

Hathibelagal là một nhà phát triển và blogger ứng dụng Android độc lập, thích mày mò với các khung, SDK và thiết bị mới.

Làm cách nào để mở PDF với JavaScript?

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

Làm cách nào để xem PDF trong HTML?

Trình xem PDF JS là gì?