Hướng dẫn html form to pdf javascript - biểu mẫu html sang pdf javascript
|
Show Định dạng tệp PDF rất hữu ích để tải xuống dữ liệu hàng loạt trong ứng dụng web. Nó giúp người dùng tải xuống nội dung động ở định dạng tệp để sử dụng ngoại tuyến. Với chức năng xuất sang PDF, nội dung HTML được chuyển đổi thành tài liệu PDF và được tải xuống dưới dạng tệp PDF. Trong ứng dụng web động, tập lệnh phía máy chủ được sử dụng để chuyển đổi HTML thành PDF và tạo tệp PDF bằng PHP. format is very useful to download bulk data in the web application. It helps the user to download dynamic content in file format for offline use. With export to PDF functionality, the HTML content is converted to a PDF document and downloaded as a PDF file. In the dynamic web application, a server-side script is used to convert HTML to PDF and generate PDF file using PHP. Nếu bạn muốn một giải pháp phía máy khách để tạo tài liệu PDF, JavaScript là cách dễ nhất để chuyển đổi HTML thành PDF. Có nhiều thư viện JavaScript khác nhau có sẵn để tạo PDF từ HTML. JSPDF là một trong những thư viện tốt nhất để chuyển đổi HTML thành PDF bằng JavaScript. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo tài liệu PDF và chuyển đổi HTML thành PDF bằng thư viện JavaScript và JSPDF.convert HTML to PDF. There are various JavaScript library is available to generate PDF from HTML. The jsPDF is one of the best library to convert HTML to PDF using JavaScript. In this tutorial, we will show you how to generate PDF document and convert HTML to PDF using JavaScript and jsPDF library. Trong tập lệnh ví dụ này, chúng tôi sẽ chia sẻ các đoạn mã để xử lý việc tạo PDF và HTML sang các hoạt động liên quan đến chuyển đổi PDF bằng JavaScript. Bao gồm thư viện JSPDFThư viện jQuery không bắt buộc, chỉ bao gồm tệp thư viện JSPDF để sử dụng lớp JSPDF. <script src="js/jsPDF/dist/jspdf.umd.js">script> Lưu ý rằng: Bạn không cần tải xuống thư viện JSPDF một cách riêng biệt, tất cả các tệp cần thiết được bao gồm trong gói mã nguồn của chúng tôi. You don’t need to download the jsPDF library separately, all the required files are included in our source code package. Tải và bắt đầu lớp JSPDFSử dụng dòng mã sau để bắt đầu lớp JSPDF và sử dụng đối tượng JSPDF trong JavaScript. window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF(); Tạo PDF bằng JavaScriptVí dụ sau đây cho thấy cách sử dụng thư viện JSPDF để tạo tệp PDF bằng JavaScript.
var doc = new jsPDF(); doc.text(20, 20, 'Hello world!'); doc.text(20, 30, 'This is client-side Javascript to generate a PDF.'); doc.addPage(); doc.text(20, 20, 'Visit CodexWorld.com'); doc.save('document.pdf'); Sử dụng phương thức addImage () để thêm hình ảnh vào pdf bằng đối tượng window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF();0.addImage() method to add image to PDF using window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF();0 object.
doc.addImage("path/to/image.jpg", "JPEG", 15, 40, 180, 180); Chuyển đổi nội dung HTML thành PDF bằng JavaScriptVí dụ sau đây cho thấy cách sử dụng thư viện JSPDF để chuyển đổi HTML thành PDF và tạo tệp PDF từ nội dung HTML bằng JavaScript.convert HTML to PDF and generate PDF file from HTML content using JavaScript.
Mã HTML: <div id="content"> div> Mã JavaScript: window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF(); var elementHTML = document.querySelector("#contnet"); doc.html(elementHTML, { callback: function(doc) { doc.save('sample-document.pdf'); }, x: 15, y: 15, width: 170, windowWidth: 650 }); Cấu hình hữu íchThư viện JSPDF cung cấp các phương thức và tùy chọn khác nhau để định cấu hình tạo PDF. Một số phương pháp hữu ích của lớp JSPDF được đưa ra dưới đây thường được sử dụng để xuất HTML sang PDF bằng jQuery. Thay đổi hướng giấy: Sử dụng tùy chọn window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF();2 option to set the paper orientation of the PDF. var doc = new jsPDF({ orientation: 'landscape' }); doc.text(20, 20, 'Hello world!'); doc.text(20, 30, 'This is client-side Javascript to generate a PDF.'); doc.addPage(); doc.text(20, 20, 'Visit CodexWorld.com'); doc.save('document.pdf'); Thay đổi phông chữ văn bản: Sử dụng phương thức window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF();3 method to set text font faces, text alignment and rotation in the PDF. var doc = new jsPDF(); doc.text(20, 20, 'This is the default font.'); doc.setFont("courier", "normal"); doc.text("This is courier normal.", 20, 30); doc.setFont("times", "italic"); doc.text("This is times italic.", 20, 40); doc.setFont("helvetica", "bold"); doc.text("This is helvetica bold.", 20, 50); doc.setFont("courier", "bolditalic"); doc.text("This is courier bolditalic.", 20, 60); doc.setFont("times", "normal"); doc.text("This is centred text.", 105, 80, null, null, "center"); doc.text("And a little bit more underneath it.", 105, 90, null, null, "center"); doc.text("This is right aligned text", 200, 100, null, null, "right"); doc.text("And some more", 200, 110, null, null, "right"); doc.text("Back to left", 20, 120); doc.text("10 degrees rotated", 20, 140, null, 10); doc.text("-10 degrees rotated", 20, 160, null, -10); doc.save('document.pdf'); Chuyển đổi nội dung HTML thành PDF bằng hình ảnh và nhiều trangTrong ví dụ này đoạn mã mã, chúng tôi sẽ chỉ ra cách sử dụng thư viện JSPDF để chuyển đổi HTML thành PDF và tạo tệp PDF từ nội dung HTML bao gồm hình ảnh bằng JavaScript.
JavaScript: window.jsPDF = window.jspdf.jsPDF; function Convert_HTML_To_PDF() { var doc = new jsPDF(); var elementHTML = document.querySelector("#contentToPrint"); doc.html(elementHTML, { callback: function(doc) { doc.save('document-html.pdf'); }, margin: [10, 10, 10, 10], autoPaging: 'text', x: 0, y: 0, width: 190, windowWidth: 675 }); } HTML: <html lang="en"> <head> <script src="js/html2canvas.min.js">script> <script src="js/jsPDF/dist/jspdf.umd.js">script> <script> script> head> <body> <button onclick="Convert_HTML_To_PDF();">Convert HTML to PDFbutton> <div id="contentToPrint"> <h2>What is Lorem Ipsum?h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.p> <img src="path/to/image.jpg"> <img src="path/to/image_2.jpeg"> div> body> html> Tạo PDF với Watermark trong PHP bằng cách sử dụng DOMPDF Sự kết luậnMã ví dụ của chúng tôi giúp bạn chuyển đổi HTML thành PDF và tạo tệp PDF bằng JavaScript. Bạn có thể dễ dàng thêm chức năng xuất vào PDF trên trang web mà không phụ thuộc vào tập lệnh phía máy chủ. Chức năng tạo PDF có thể được tăng cường với các tùy chọn cấu hình JSPDF theo nhu cầu của bạn. Tải xuống gói mã nguồn của chúng tôi để có tất cả các tệp cần thiết bao gồm thư viện JSPDF JavaScript.Export to PDF functionality on the web page without depending on the server-side script. The PDF creation functionality can be enhanced with jsPDF configuration options as per your needs. Download our source code package to get all the required files including the jsPDF JavaScript library. Bạn có muốn nhận trợ giúp thực hiện hoặc sửa đổi hoặc tăng cường chức năng của tập lệnh này không? Gửi yêu cầu dịch vụ trả phí Nếu bạn có bất kỳ câu hỏi nào về kịch bản này, hãy gửi nó cho cộng đồng QA của chúng tôi - đặt câu hỏi |
