Đọc tệp PDF trong JavaScript
|
Hàng ngàn trang PDF có thể được tải ngay lập tức. Hỗ trợ ảo hóa và tải theo yêu cầu giúp giảm thời gian tải ban đầu cho các tệp PDF lớn hơn Show
 Trình xem PDF cung cấp nhiều chú thích khác nhau bao gồm đánh dấu văn bản, hình dạng, con dấu, ghi chú dán, đo lường, văn bản tự do và viết tay Trình xem PDF Cung cấp các chế độ tương tác lựa chọn và xoay trong các tài liệu PDF đã tải của bạn, giúp việc tương tác trở nên dễ dàng hơn Bảng điều khiển nhận xét có thể được sử dụng để thêm nhận xét dưới dạng chú thích, trả lời nhận xét và trạng thái vào tệp PDF Thêm chữ ký viết tayBạn có thể thêm chữ ký viết tay vào tệp PDF của mình. Tùy chỉnh chúng bằng cách thay đổi kích thước, di chuyển, xóa và lưu chúng. Họ tăng cường quá trình kỹ thuật số Trình xem PDF được thiết kế để đáp ứng với thiết kế được tối ưu hóa cho máy tính để bàn, màn hình cảm ứng và điện thoại thông minh. Nó hoạt động tốt trên tất cả các điện thoại di động sử dụng hệ điều hành iOS, Android hoặc Windows Thiết kế tiên tiến với một số chủ đề tích hợp sẵn, chẳng hạn như Fluent, Tailwind CSS, Bootstrap, Material và Fabric. Sử dụng công cụ Theme Studio trực tuyến để tùy chỉnh chủ đề dễ dàng Toàn cầu hóa và địa phương hóaCho phép người dùng từ các ngôn ngữ khác nhau sử dụng thành phần bằng cách định dạng nội dung văn bản cho phù hợp với sở thích của họ Tệp Định dạng Tài liệu Di động hoặc PDF là định dạng tệp chỉ đọc tiêu chuẩn được cung cấp trực tuyến. Các tệp PDF cho phép doanh nghiệp tạo tài liệu mà người đọc không thể thay đổi nếu không có mật khẩu quản trị viên. JavaScript có thể được sử dụng để mở tệp và đọc nội dung của tệp PDF. Sau đó, bạn có thể sử dụng dữ liệu để thêm vào cơ sở dữ liệu, ghi vào trang Web hoặc chỉnh sửa dữ liệu cho một tệp PDF khác Tạo đối tượng tài liệu trỏ đến tệp JavaScript. Bạn tạo một đối tượng biến tài liệu để bạn có thể đọc hoặc chỉnh sửa tệp. Đoạn mã sau tạo biến trỏ đến tệp "pdffile. file PDF var doc = new jsPDF("file pdf. pdf"); Đọc dữ liệu trong tệp PDF. Bạn sử dụng chức năng "nội dung" có sẵn từ đối tượng "doc" mới để đọc nội dung. Thêm đoạn mã sau để trích xuất dữ liệu nội dung = tài liệu. đầu ra(); In kết quả ra màn hình. Để kiểm tra xem chức năng có thành công hay không, hãy in dữ liệu đã trích xuất bằng đoạn mã sau Jaxer. phản ứng. addHeader('Bố trí nội dung', 'file đính kèm; filename=pdffile. pdf'); Jaxer. phản ứng. addHeader('Kiểu nội dung', 'ứng dụng/pdf'); Jaxer. phản ứng. setContents(nội dung); Người giới thiệu
tiểu sử nhà văn Jim Campbell đã là một kỹ sư máy tính trong hơn năm năm. Anh ấy xuất sắc trong lĩnh vực sửa chữa phần cứng, lập trình và khắc phục sự cố máy tính cũng như thiết kế phần mềm. Anh ấy hiện đang theo học tại Đại học Florida Atlantic, theo đuổi bằng thạc sĩ về kỹ thuật điện và máy tính, đồng thời trau dồi khả năng viết kỹ thuật của mình Định dạng Tài liệu Di động, hay viết tắt là PDF, lý tưởng để chia sẻ 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ó khả năng đượ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 đều có thể hiển thị tệp PDF, nhưng chúng làm như vậy bằng cách sử dụng trình xem PDF chạy trong 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 là thư viện JavaScript mã nguồn mở cho phép bạn phân tích cú pháp và hiển thị tệp PDF ngay trong trang web của mình. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng nó để tạo một trình xem JavaScript JavaScript tùy chỉnh hoàn chỉnh 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 plugin Flipbook chuyên nghiệp. Sách lật JavaScript hiển thị nội dung của bạn ở dạng sách lật kỹ thuật số, sử dụng hiệu ứng lật trang, thu phóng và hỗ trợ nhiều loại nội dung
1. Tạo giao diện người dùngHãy bắt đầu bằng cách tạo một trang web mới và thêm mã soạn sẵn HTML5 thông thường vào đó 1 2 3 4 5 0 1 2 3 4 5 6 7 8 9 20 21_______2_______2_______2_______3 Tiếp theo, bên trong 454, hãy tạo một phần tử 455 có thể dùng làm vùng chứa cho trình xem PDF của chúng ta 1 25 2 9_______4_______ 29 Trọng tâm của trình xem JavaScript JavaScript của chúng tôi sẽ là phần tử HTML5 456. Chúng tôi sẽ hiển thị các trang của tệp PDF của chúng tôi bên trong nó. Vì vậy, hãy thêm mã sau vào bên trong phần tử 455 1 1_______2_______ 3_______4_______ 29 Để giữ cho mọi thứ đơn giản, chúng tôi sẽ chỉ hiển thị một trang bên trong canvas 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 chuyển đến bất kỳ trang nào họ muốn, giao diện của chúng tôi sẽ có trường nhập liệu 1 7 2 9_______4_______ 31 44_______3_______8_______ 29 Để hỗ trợ các thao tác thu phóng, hãy thêm hai nút nữa vào giao diện. một để phóng to và một để thu nhỏ 1 37 2 39_______4_______ 4___ 29 Ở cuối phần này, mã trang web trông như thế này 1 2 3 4 5 1 0 3 2 5 4 7 6 1 8 3 20 5 22 7 8 9 50 51 52 53 54 55 56 57 7 59 0 1 2 3 4 5 67 8 900 21 02 23 2. Tải PDF. jsBây giờ giao diện người dùng cơ bản cho trình xem JavaScript 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. Vì phiên bản mới nhất của thư viện có sẵn trên CDNJS nên chúng tôi có thể làm như vậy bằng cách chỉ cần thêm các dòng sau vào cuối trang web 1 05_______2_______ 07 3 09 Nếu muốn sử dụng bản sao cục bộ của thư viện, bạn có thể tải xuống từ kho lưu trữ pdfjs-dist 3. Đang tải tệp PDFTrướ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 ta 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 1 11_______2_______ 13 3 15 41_______17 51_______19 0 21 2 1_______4 25 6 09 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 phương thức 458 của đối tượng 459, chạy không đồng bộ 1 29 2 3 33_______6_______ 5 37 Lưu ý rằng phương thức 458 sử dụng nội bộ một đối tượng 461 để tải tệp PDF. Điều này có nghĩa là tệp phải có trên máy chủ web của riêng bạn hoặc trên máy chủ cho phép yêu cầu trên nhiều nguồn gốc Nếu bạn không có sẵn tệp PDF, bạn có thể lấy tệp tôi đang sử dụng từ Wikipedia Khi tệp PDF đã được tải thành công, chúng ta có thể cập nhật thuộc tính 462 của đối tượng trạng thái của mình 1 39 Cuối cùng, thêm lệnh gọi hàm có tên 463 để 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 ta sẽ xác định chức năng trong bước tiếp theo 1 41 4. Hiển thị trangBằng cách gọi phương thức 464 của đối tượng 462 và truyền số trang cho nó, chúng ta có thể lấy tham chiếu đến bất kỳ trang nào trong tệp PDF. Bây giờ, hãy chuyển thuộc tính 466 của đối tượng trạng thái của chúng ta cho nó. Phương thức này cũng trả về một lời hứa, vì vậy chúng ta sẽ cần một hàm gọi lại để xử lý kết quả của nó Theo đó, hãy tạo một hàm mới có tên 463 có chứa mã sau 1 43_______2_______ 45_______4__________ ________6____1_______49 5 1_______0 53 2 55 Để thực sự hiển thị một trang, chúng ta phải gọi phương thức 463 của đối tượng 469 có sẵn bên trong hàm gọi lại. Là đối số, phương thức mong đợi bối cảnh 2D của khung vẽ của chúng ta và một đối tượng 470, mà chúng ta có thể nhận được bằng cách gọi phương thức 471. Bởi vì phương thức 471 lấy mức thu phóng mong muốn làm đối số, nên chúng ta phải chuyển thuộc tính 473 của đối tượng trạng thái cho nó 1 57_______2_______ 59 3 4 63 Kích thước của khung nhìn 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ộ khung nhìn được hiển thị trên khung vẽ của chúng ta, bây giờ chúng ta phải thay đổi kích thước khung vẽ của mình để phù hợp với khung nhìn của khung nhìn. Đây là cách 1 65_______2_______1_______67 Tại thời điểm này, chúng ta có thể tiếp tục và hiển thị trang 1 69 2 71_______4_______ 73_______6_______1_______37 Đặt tất cả lại với nhau, toàn bộ mã nguồn trông như thế này 1 2 3 4 5 0 1 2 3 4 91 6 07 8 95 20 5 22 7 8 1 9 3 51 5 53 7 55 57 50 59 52 054 256 47 6 8 100 302 5226 7 228 9230 231 232 233________2____ Nếu bạn thử mở trang web trong trình duyệt, bây giờ bạn có thể xem trang đầu tiên của tệp PDF của mình 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 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 trang web của mình bị ảnh hưởng trong khi người dùng tương tác với trình xem PDF. Để khắc phục điều này, tất cả những gì chúng ta cần làm là cung cấp chiều rộng và chiều cao cố định cho phần tử 455 đóng gói canvas của chúng ta và đặt thuộc tính CSS 475 của nó thành 476. Khi cần, thuộc tính này sẽ thêm các thanh cuộn vào phần tử 455, cho phép người dùng cuộn theo cả chiều ngang và chiều dọc Thêm mã sau vào thẻ 478 của trang web 1 297_______2_______ 299_______4__________ 01 43_______03 53_______05 0 21 2 09 Tất nhiên, bạn có thể tự do thay đổi chiều rộng và chiều cao hoặc thậm chí sử dụng truy vấn phương tiện để làm cho phần tử 455 khớp với yêu cầu của mình Theo tùy chọn, bạn có thể bao gồm các quy tắc CSS sau đây để làm cho phần tử 455 có vẻ khác biệt hơn 1 11_______2_______ 13_______4__________ 15 43_______17_______8____1_______55 Nếu bạn làm mới trang web 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. Thay đổi trang hiện tạiTrình xem JavaScript JavaScript của chúng tôi 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 đang được hiển thị, bây giờ chúng ta phải thêm trình xử lý sự kiện nhấp chuột vào các nút 481 và 482 mà chúng ta đã tạo trước đó Bên trong trình lắng nghe sự kiện của nút 481, chúng ta phải giảm thuộc tính 466 của đối tượng trạng thái, đảm bảo rằng thuộc tính đó không giảm xuống dưới 485. Sau khi làm như vậy, chúng ta chỉ cần gọi lại hàm 463 để 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 văn bản 487 để nó hiển thị số trang mới. Đoạn mã sau chỉ cho bạn cách 1 21 2 23 3___ 25 43_______27 53_______29 0 31 2 33 4 35 6 37 Tương tự, bên trong trình xử lý sự kiện của nút 482, chúng ta phải tăng thuộc tính 466, đồng thời đảm bảo rằng nó không vượt quá số trang có trong tệp PDF mà chúng ta có thể xác định bằng cách sử dụng thuộc tính 490 của đối tượng 491 1 39 2 23 3___ 43 43_______27 52_______62 0 49 2 33 4 35 6 37 Cuối cùng, chúng ta phải thêm trình xử lý sự kiện nhấn phím vào trường văn bản 487 để người dùng có thể chuyển trực tiếp đến bất kỳ trang nào họ muốn bằng cách chỉ cần nhập số trang và nhấn phím Enter . Bên trong trình lắng nghe sự kiện, chúng ta cần đảm bảo rằng số mà người dùng đã nhập vừa lớn hơn 0 vừa nhỏ hơn hoặc bằng thuộc tính 490 1 57 2 59 3 61 4 5 65 0 67 2 4 71 6 73 8 75 20 77 22 79 8 81 9 83 51 252 53 242 55 21 57 91 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. Thay đổi mức thu phóngVì hàm 463 của chúng ta đã sử dụng thuộc tính 473 của đối tượng trạng thái trong khi hiển thị trang nên việc điều chỉnh mức thu phóng cũng dễ dàng như tăng hoặc giảm thuộc tính và gọi hàm Bên trong trình xử lý sự kiện khi nhấp chuột của nút 496, hãy tăng thuộc tính 473 lên 498 1 93 2 23_______4__________ 61 43_______99 51_______0 35 2 37 Và bên trong trình xử lý sự kiện khi nhấp chuột của nút 499, hãy giảm thuộc tính 473 bởi 498 1 306 2 23_______4__________ 61_______6_______4_______12 54_______14 0 35 2 37 Bạn có thể tự do thêm giới hạn trên và giới hạn dưới cho thuộc tính 473, 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 đặt lại với nhau 1 2 3 4 5 0 1 2 3 4 91 6 336 8 95 20 22 341 8 343 9 345 51 347 53 349 55 351 57 59 343 0356 2358 4360 6351 8364 00 5 02 7 226 1 228 3 230 5 231 7___ Trình xem PDF của chúng tôi đã sẵn sàng. Nếu bạn làm mới lại trang web, bạn sẽ có thể xem tất cả các trang có trong tệp PDF và cũng có thể phóng to hoặc thu nhỏ chúng Plugin Flipbook cao cấp từ CodeCanyonBạn cũng có thể quan tâm đến plugin sách lật chuyên nghiệp. Sách lật JavaScript hiển thị nội dung của bạn ở dạng sách lật kỹ thuật số, sử dụng hiệu ứng lật trang, thu phóng và hỗ trợ nhiều loại nội dung. CodeCanyon là thị trường dành cho tất cả các loại mã, bao gồm. Đó là nơi tốt nhất để tìm plugin jQuery flipbook Làm cách nào để đọc tệp PDF trong JavaScript?Cách đọc tệp PDF cục bộ bằng JavaScript. Trước khi thực hiện bất kỳ thao tác nào trên tài liệu PDF của chúng tôi, chúng tôi phải lấy tài liệu từ người dùng. Đọc bất kỳ tệp nào trong trình duyệt có thể được xử lý bằng API web FileReader. Trước tiên, chúng tôi sẽ tạo và tạo nút nhập tệp, sau đó xử lý tệp đã tải lên bằng API web FileReader .
Làm cách nào để đọc tệp PDF theo chương trình?Mở tệp PDF trong Android bằng WebView
. put WebView in your layout and load the desired URL by using the webView. hàm loadUrl(). Bây giờ, hãy chạy ứng dụng trên điện thoại di động của bạn và PDF sẽ được hiển thị trên màn hình.
Làm cách nào để trích xuất văn bản từ PDF bằng JavaScript?then(function (pdfPage) { // Thủ thuật chính để lấy văn bản của trang PDF, sử dụng phương thức getTextContent pdfPage. getTextContent() . sau đó (hàm (textContent) { var textItems = textContent. mặt hàng; .
Làm cách nào để làm việc với PDF trong JavaScript?Thêm JavaScript vào Tài liệu PDF . Bước 1. Đang tải tài liệu PDF hiện có. Tải tài liệu PDF hiện có bằng cách sử dụng phương thức tĩnh load() của lớp PDDocument. . Bước 2. Tạo đối tượng PDActionJavaScript. . Bước 3. Nhúng tập lệnh Java vào Tài liệu. . Bước 4. Lưu tài liệu. . Bước 5. Đóng tài liệu |
