Cách hiển thị file PDF trên web

Bạn có thể nhúng pdf và hiển thị trên website một cách đơn giản với HTML5. Hiện nay có khá nhiều trình xem PDF HTML5 chèn trên web. Ví dụ website của bạn được thiết kế chuyên để đọc các tài liệu pdfs, và tất cả các trình duyệt có khả năng hiển thị nội dung file sử dụng một số các giải pháp sau:

Nội dung chính Show

Chuyển PDF sang HTML5
Mã nhúng HTML5 PDF Viewer
Sử dụng Flex Paper
Xem PDF kiểu lật sách
Chia sẻ bài viết:
Có liên quan

IDR Solutions
PDF Projects
Flex Paper Project
Very PDF

Các thư viện này có nguyên lý chung, nội dung pdf bạn nhìn thấy trên website đã phải được chuyển đổi qua thư viện để tương thích với mỗi trình đọc pdf. Ví dụ idrsolutions là một công cụ viết bằng java giúp bạn chuyển đổi file pdf thành HTML5/SVG.

Về cơ bản, bạn upload file của bạn và chuyển đổi thành HTML5/flash mà được hỗ trợ bởi trình duyệt sau đó công cụ sẽ tạo ra mã code cho bạn nhúng vào trong webspage. Hầu hết các trình xem PDF cũng sẽ phát hành phần mềm để thương mại, vì vậy bạn có thể tải và cài đặt trên máy tính thay vì sử dụng dịch vụ trực tuyến của họ. Bạn sẽ loại bỏ được nhãn thương hiệu đính vào sản phẩm và bạn có quyền thay thế với hình ảnh thương hiệu bản quyền bạn đã đặt mua. Ví dụ strong>Flex Paper Project.

Tuy nhiên, nếu mánh khóe hơn và biết cách hack flash swf bạn cũng có thể loại bỏ copyright một cách bất hợp pháp.

Chuyển PDF sang HTML5

Bạn có thể convert pdf file thành HTML5, khi đó mọi người dùng có thể xem nội dung trong file pdf một cách dễ dàng. Với cách này, bạn không phải lo lắng có ai đó không xem được file của bạn. Công cụ đầu tiên mình muốn nói là idrsolutions, có cung cấp dịch vụ online chuyển đổi miễn phí từ pdf sang html5 chạy trên web https://www.idrsolutions.com/online-pdf-to-html5-converter/.

Mã nhúng HTML5 PDF Viewer

Sử dụng đoạn code html5, cho phép nhúng và hiển thị pdf trên website.

<a href="http://âPDFfiles/interfaces.pdfâ">http://âPDFfiles/interfaces.pdfâ</a>

Thay địa file .pdf của bạn ở thuộc tính src. Với thẻ embed sẽ làm việc ở hầu hết các trình duyệt có đáp ứng html5 hiện nay như firefox, chrome..

Sử dụng Flex Paper

Bài viết này mình dành thời gian cho dự án Flex Paper. Một cách khác là sử dụng swf thay thế, bằng cách chuyển pdf thành swf, với thư viện Flex Paper cung cấp giải pháp hoàn hảo cho việc đọc dữ liệu pdf trên website, và bạn dễ dàng tìm kiếm chuỗi ngay trên trình đọc flash.

Bước 1: Trước tiên, bạn cần chuyển pdf sang swf sử dụng công cụ phổ biến swftools. PDF chuyển sang swf với mỗi page trong pdf là một frame và chèn mã dừng stop() cho mỗi frame. Sau đó sử dụng thư viện tạo trình đọc flexpager chuyên dụng cho nội dung chuyển đổi trên.

Bước 2: sau khi đã có pdf swf, chúng ta nhúng swf mới có nội dung lấy từ file pdf vào website sử dụng jquery.
Tải thư viện flexpager cho web tại đây.
Giải nén rồi upload host và chèn các files sau đây trong thẻ head.

Chúng ta sẽ hiển thị khung xem nội dung flash vào thẻ html. Tạo trình đọc flash vào thẻ div #documentViewer sử dụng đoạn code dưới đây:

$('#documentViewer').FlexPaperViewer( { config : { SWFFile : 'pdf/Paper.swf', Scale : 0.6, ZoomTransition : 'easeOut', ZoomTime : 0.5, ZoomInterval : 0.2, FitPageOnLoad : true, FitWidthOnLoad : false, FullScreenAsMaxWindow : false, ProgressiveLoading : false, MinZoomSize : 0.2, MaxZoomSize : 5, SearchMatchAll : false, InitViewMode : 'Portrait', RenderingOrder : 'flash', StartAtPage : '', ViewModeToolsVisible : true, ZoomToolsVisible : true, NavToolsVisible : true, CursorToolsVisible : true, SearchToolsVisible : true, WMode : 'window', localeChain: 'en_US' }} );

Chèn thẻ div vào nơi bạn muốn hiển thị khung xem pdf.

Như bạn thấy ở trên, thư viện flex pager cung cấp khá nhiều tham số cài đặt giúp bạn tùy biến thêm bớt nút hay thay đổi giao diện hiển thị cho trình đọc pdf trên website.

Xem PDF kiểu lật sách

FlexPaper là phần mềm trình chiếu file PDF, trước khi PDF được đọc trên trình duyệt, bạn phải thông qua công cụ này bằng cách chuyển PDF sang swf và file swf tạo ra được đọc bởi thư viện FlexPager. Nhờ điều này mà thư viện có rất nhiều kiểu dáng giúp bạn đọc nội dung PDF một cách đẹp mắt.
Điển hình ở các trang đọc truyện, bạn nhìn thấy flash có kiểu lật từng trang sách trông khá quốn hút giống như hình dưới:

Bạn truy cập vào trang web http://flexpaper.com để xem chi tiết. Tải từng gói với từng kiểu dáng có cung cấp dùng thử miễn phí (Trial) cài đặt về máy tính. Hoặc nhấn vào menu Download và tải các gói hỗ trợ.

Nhấn vào Download Desktop Publisher, đây là phần mềm viết bằng flex bạn sẽ dùng để chuyển đổi pdf sang swf có dạng lật sách và một số kiểu khác, tuy nhiên với bản free sẽ giới hạn tính năng rất nhiều. Giao diện phần mềm FlexPaper:

Nhập file pdf bằng cách chọn nút Open PDF, tiếp đến thiết lập một vài thông số cần thiết như định dạng xuất ra nó hỗ trợ 3 định dạng: flash (swf), HTML4, HTML5. Tùy chọn độ phân giải hình ảnh và chữ..
Ở khung giữa cho bạn xem trước hình thức đọc pdf, Hoàn tất chúng ta tiến hành xuất bản ra files và code tại cửa sổ phần mềm click vào nút Publish & View.

Công cụ tạo ra 2 file .swf và index.html, bạn copy code trong file index.html và nhúng vào web. Sau khi publish hoàn tất, để xem thử ngay trên trình duyệt bạn nhấn vào nút View in browser.

Kết quả:

Chúc bạn thành công !