Hướng dẫn html show pdf
Hướng dẫn nhúng (embed) và xem (Preview) file PDF trong HTML, HTML5.Dưới đây là những phương pháp hiệu quả nhất để nhúng file PDF trong HTML và xem file PDF trên các trình duyệt phổ biến Chrome, Firefox, Safari, IE… Thứ tự ưu tiên sử dụng là từ trên xuống. Show Sử dụng thư viện PDF.JSĐây chắc chắn là phương pháp hiệu quả nhất, việc sử dụng thư viện của 1 bên thư ba, giúp tương thích tốt với nhiều trình duyệt.
Sử dụngĐây là cách nhanh và dễ dàng cũng như tương thích với nhiều trình duyệt. Một ví dụ về nhúng file PDF bằng cách sử dụng thẻ Tuy nhiên từ tháng 1/2018, trình duyệt Chrome trên Android đã không còn hỗ trợ embed trực tiếp file PDF, thay vào đó bạn sử dụng thông qua Google Drive PDF viewer. Tham khảo đoạn code bên dưới. Sử dụngĐây là 1 phương pháp cũ, tuy nhiên vẫn có thể sử dụng với 1 số trình duyệt, các bạn tham khảo thêm nhé! Sử dụngMột phương pháp nữa là có thể sử dụng Iframe, nhưng không trực tiếp nhúng file pdf mà thông qua Google Doc Việc chọn phương nào tốt nhất là dựa trên yêu cầu của dự án. Chúc các bạn tìm được phương pháp hiệu quả. Nguồn: vinasupport.com Có một số cách để bao gồm tệp PDF trong tài liệu HTML của bạn:
Cách dễ nhất để đặt tài liệu PDF vào tài liệu HTML là sử dụng thẻ với thuộc tính href . Những gì bạn cần thêm vào thành phần là URL hoặc liên kết tham chiếu của tệp PDF của bạn. Mã của bạn sẽ trông như thế này: VD:
Mã hoàn chỉnh sẽ như thế này:
Nếu bạn không muốn người dùng tải xuống tệp PDF của mình, chỉ cần thêm # thanh công cụ = 0 sau URL của tài liệu PDF của bạn:
Nguồn:Cách nhúng trình xem PDF trong HTML Dịch bởi:Vũ Đức Nguyên. Mozilla's PDF.JS is PDF viewer made with HTML5 technologies. It can help your application in custom rendering of PDF files — showing a PDF file in a in your HTML page and browsing through its pages using Javascript.
Please note that PDF.JS is just a PDF viewer and not a PDF editor. It is not a library to create PDF files. PDF.JS is used by Firefox internally to display PDF files. In fact PDF.JS is so good that even Opera decided to use it. Example — Displaying PDF in a div ContainerClick on the below button to display this PDF file. Download Example CodesDownloadPDF.JS APIs Used in This TutorialWhen you include the PDF.JS script files, you get a pdfjsLib global object. This object provides a number of APIs that you can call in your Javscript code.
Writing Code, Step 1 : Including PDF.JS Script Files
Step 2 : Preparing HTML
Step 3 : Defining some Javascript variablesWe need a few global variables that will hold properties used throughout the code.
Step 4 : Rendering the PDF with JavascriptTwo custom functions shown below handle most of the code. showPDF loads the PDF. It accepts the url of the PDF as parameter. On successful loading it calls the showPage function that will show the first page of the PDF. showPage loads and renders a specified page of the PDF. While a page is being rendered, Previous and Next buttons are disbaled. A very important point is to note that we have to change the scale of the rendered page as per the width of the canvas element. In the current case, the width of the canvas element is less than the actual width of the PDF, so when PDF is rendered in the canvas it has to be scaled down. Event handlers on the Previous / Next buttons simple decrement / increment the current page shown and call the showPage function.
Browser CompatibilityThe above code will work good in all major browsers, including IE 10+. Enabling Text Selection ?To enable text selection, some extra steps need to be followed. See How to Enable Text Selection in PDF.JS for more. PDF Viewer Javascript PluginA premium responsive PDF Viewer plugin is also available. It has some advanced features like embedding multiple PDF files in a single page, viewing PDF files when a link is clicked, modal & full-screen mode, finding out whether user has fully viewed the PDF etc. |