Không bao giờ là quá muộn để bắt đầu học và sẽ thật đáng tiếc nếu bỏ lỡ cơ hội học một hướng dẫn hoặc khóa học có thể rất hữu ích như HTML, CSS, Bootstrap, Javascript và jQuery, đặc biệt là khi nó miễn phí. Bạn không cần phải đăng ký các lớp học đắt tiền và đi từ khu vực này sang khu vực khác của thị trấn để tham gia các lớp học. Tất cả những gì bạn cần làm là tải xuống khóa học và mở tệp PDF. Chương trình cụ thể này được phân loại trong danh mục Lập trình web, nơi bạn có thể tìm thấy một số khóa học tương tự khác
Nhờ những người (như bạn?) chia sẻ kiến thức của họ, bạn có thể khám phá mức độ lựa chọn của chúng tôi để dễ dàng học hỏi mà không tốn nhiều tiền. HTML, CSS, Bootstrap, Javascript và jQuery. có sẵn miễn phí bởi tác giả của nó. Nhưng cũng có nhiều hướng dẫn khác có thể truy cập dễ dàng
Máy tính PDF hướng dẫn bạn và cho phép bạn tiết kiệm cho việc học của mình
HTML, CSS, Bootstrap, Javascript và jQuery. trợ giúp trên biểu mẫu liên hệ nếu có vấn đề
PDF trên máy tính cũng là khóa đào tạo về html & html5, css & css3, javascript, php, asp, j2ee, ajax, jquery, node. js, angularjs và nhiều thứ khác CNTT.
Bạn nên xem tài liệu lập trình Web của chúng tôi. Bạn sẽ tìm thấy hạnh phúc của mình mà không gặp rắc rối.
Tin tức mới nhất và đặc biệt là các hướng dẫn hay nhất về các chủ đề yêu thích của bạn, đó là lý do tại sao Computer PDF là số 1 cho các khóa học và hướng dẫn tải xuống dưới dạng tệp pdf - HTML, CSS, Bootstrap, Javascript và jQuery. và lập trình Web.
Tải xuống các hướng dẫn khác để được tư vấn về HTML, CSS, Bootstrap, Javascript và jQuery. Bạn sẽ thấy. Chúng tôi sẽ làm mọi thứ để giúp bạn.
Và bạn thân yêu lướt những gì bạn cần? . Đương nhiên
Sách CSS miễn phí, Sách CSS Pdf, Sách Pdf CSS, Tải xuống sách Pdf CSS, Tải xuống miễn phí sách Pdf CSS, Sách HTML miễn phí, Sách Pdf HTML, Sách Pdf HTML, Tải xuống sách Pdf HTML, Tải xuống miễn phí sách Pdf HTML, Sách CSS HTML miễn phí
Sách CSS miễn phí, Sách CSS Pdf, Sách Pdf CSS, Tải xuống sách CSS Pdf, Tải xuống miễn phí sách CSS Pdf, Sách HTML miễn phí, Sách HTML Pdf, Sách Pdf HTML, Tải xuống sách Pdf HTML, Tải xuống miễn phí sách Pdf HTML, Sách HTML5 miễn phí,
Việc tạo định dạng tệp PDF trong JavaScript phía máy khách giờ đây trở nên đơn giản với một thư viện tuyệt vời mà chúng tôi có thể đã nghe nói đến
Thư viện cho phép bạn chọn các phần tử DOM (Mô hình đối tượng tài liệu) mà bạn muốn xuất bản dưới dạng nội dung PDF
Xuất HTML/CSS chung sang PDF đã là một câu hỏi mở mà không có câu trả lời dứt khoát trong một thời gian dài
Chúng tôi đã vật lộn với nhiều cách tiếp cận khác nhau và nói chung, tất cả chúng đều có nhược điểm. Tôi có nghiên cứu cụ thể về việc sử dụng thư viện jsPDF và tôi sẽ hướng dẫn bạn quy trình thiết lập mọi thứ và tạo một thiết kế khá đơn giản nhưng phức tạp mà bạn sẽ cần trên hành trình tạo các mẫu báo cáo PDF tuyệt vời
Báo cáo vấn đề
Làm việc với nội dung HTML/CSS chung sang PDF đã là một câu hỏi mở mà không có câu trả lời dứt khoát trong một thời gian dài. Chúng tôi đã vật lộn với nhiều cách tiếp cận khác nhau và nói chung, tất cả chúng đều có nhược điểm
Các câu hỏi phổ biến bạn sẽ thấy trên web được hiển thị bên dưới.
• Có thể lưu trang HTML dưới dạng PDF bằng JavaScript hoặc jQuery không?
• Cách xuất các trang HTML dưới dạng PDF bằng JavaScript thuần túy.
• Cách tạo nhiều trang.
• Tạo PDF từ HTML trong div bằng JavaScript.
• Nhiều trang với trình chuyển đổi HTML sang PDF.
Những câu hỏi cứ lặp đi lặp lại
Mục tiêu của Hướng dẫn này
Tôi sẽ hướng dẫn bạn cách bắt đầu và tích hợp jsPDF vào ứng dụng web JavaScript dựa trên trình duyệt của bạn
Khi kết thúc bài học này, bạn sẽ có thể làm những việc sau.
• Sử dụng Điểm cuối API fromHtml để nhận trình bao bọc vùng chứa nội dung HTML của chúng tôi.
• Tạo tệp PDF có nhiều trang.
• Tạo một chức năng để chuyển đổi hình ảnh thành hình ảnh base64 Bộ định vị tài nguyên thống nhất (URL) và sử dụng trong tiêu đề của chúng tôi.
• Thêm văn bản đầu trang và chân trang (như số trang) vào mỗi trang jsPDF được tạo riêng lẻ.
điều kiện tiên quyết
Bạn có thể tìm thấy thư viện tại đây. MrRio/jsPDF.
Nhấp để tải xuống octocat. jpg.
Tải xuống thư viện jsPDF và sử dụng hình ảnh làm hướng dẫn cho cấu trúc thư mục dự án của chúng tôi
Đầu tiên, chúng ta sẽ thiết lập cấu trúc thư mục như trong Hình trên.
Mở thư mục jsPDF từ điều kiện tiên quyết và sao chép thư mục dist vào thư mục dự án của bạn.
Tạo một tệp mới và đặt tên là chỉ mục. html.
Tải xuống hoặc Sao chép Hình ảnh Tiêu đề vào thư mục dự án.
Làm việc với chỉ mục. tệp html
Chúng tôi sẽ tạo khung HTML của chúng tôi bằng các thẻ HTML tiêu chuẩn
Index.html <!doctype> <html> <head> <title>Html to Multi Page PDF using jsPDF</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> @CHARSET "UTF-8"; .page-break { page-break-after: always; page-break-inside: avoid; clear:both; } .page-break-before { page-break-before: always; page-break-inside: avoid; clear:both; } #html-2-pdfwrapper{ position: absolute; left: 20px; top: 50px; bottom: 0; overflow: auto; width: 600px; } </style> </head> <body> <button title="generate()">Generate PDF</button> <div id="html-2-pdfwrapper"> <!-- html content goes here --> </div> <script src='dist/jspdf.min.js'></script> </body> </html>Từ mã, nó sẽ tự giải thích, nhưng tôi sẽ xem qua các phần khác nhau của cấu trúc mã HTML
Phần đầu chứa tiêu đề trang và biểu định kiểu cho trang.
Phần nội dung HTML có nội dung sau.
• Nút. nút tạo PDF khi nhấp sẽ kích hoạt chức năng tạo mà chúng ta chưa tạo.
______8
• Phần tiếp theo sẽ chứa tất cả nội dung HTML mà chúng tôi muốn chuyển đổi sang PDF.
______9
Viết hàm JavaScript để xử lý chuyển đổi HTML
Biến toàn cục
<script> //Global Variable Declaration var base64Img = null; margins = { top: 70, bottom: 40, left: 30, width: 550 }; /* append other function below: */ </script>Tạo chức năng PDF
generate = function() { var pdf = new jsPDF('p', 'pt', 'a4'); pdf.setFontSize(18); pdf.fromHTML(document.getElementById('html-2-pdfwrapper'), margins.left, // x coord margins.top, { // y coord width: margins.width// max width of content on PDF },function(dispose) { headerFooterFormatting(pdf) }, margins); var iframe = document.createElement('iframe'); iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:650px; padding:20px;'); document.body.appendChild(iframe); iframe.src = pdf.output('datauristring'); };Giải thích mã
Bên trong hàm tạo, chúng tôi khởi tạo Đối tượng jsPDF dưới dạng PDF.
JsPDF có Điểm cuối API được gọi là fromHTML với các tham số sau.
HTML là nội dung HTML mà bạn muốn chuyển đổi.
X là khoảng cách theo chiều ngang từ tọa độ x của trang bố cục PDF của bạn.
Y là khoảng cách dọc từ tọa độ y của trang bố cục PDF của bạn.
Chức năng gọi lại được sử dụng để thực hiện chức năng bổ sung trên các trang được tạo. Chúng tôi sẽ tận dụng chức năng gọi lại để thêm số trang và tiêu đề vào các trang của chúng tôi sau này
Chúng tôi cũng đang tạo một phần tử khung nội tuyến để hiển thị tệp PDF đã tạo của chúng tôi
Chức năng định dạng trang và chân trang
function headerFooterFormatting(doc) { var totalPages = doc.internal.getNumberOfPages(); for(var i = totalPages; i >= 1; i--) { //make this page, the current page we are currently working on. doc.setPage(i); header(doc); footer(doc, i, totalPages); } };Giải thích mã
Hàm được sử dụng để thêm dữ liệu bổ sung vào mỗi trang của PDF và do đó, nó sẽ được gọi trên tham số gọi lại fromPDF. Phải mất một đối tượng jsPDF
Chức năng tiêu đề
function header(doc) { doc.setFontSize(30); doc.setTextColor(40); doc.setFontStyle('normal'); if (base64Img) { doc.addImage(base64Img, 'JPEG', margins.left, 10, 40,40); } doc.text("Report Header Template", margins.left + 50, 40 ); doc.line(3, 70, margins.width + 43,70); // horizontal line };Tải hình ảnh tiêu đề và chuyển đổi thành base64
imgToBase64('octocat.jpg', function(base64) { base64Img = base64; });Chức năng chuyển đổi hình ảnh
// You could either use a function similar to this or preconvert an image with, for example, //dopiaza.org/tools/datauri // //stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript function imgToBase64(url, callback, imgVariable) { if (!window.FileReade) { callback(null); return; } var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { imgVariable = reader.result.replace('text/xml', 'image/jpeg'); callback(imgVariable); }; reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.send(); };Tải xuống dự án hoàn chỉnh ngay bây giờ. Bộ mã hóa HTML sang PDF. khóa kéo
Vui lòng chia sẻ nhận xét của bạn và giúp cải thiện mã bất cứ khi nào có thể
JavaScriptHTML/CSSHtml2pdfPdfJspdf
Bài báo cáo
Thưởng thức bài viết này?
25
Chia sẻ
Ameh Joseph
Nhà phát triển web Full Stack, Nhà thiết kế đồ họa & Cộng tác viên
Tôi là nhà phát triển web toàn diện cho một công ty kỹ thuật và phần mềm dầu khí ở Nigeria, nơi tôi làm việc với một nhóm đa dạng gồm các chuyên gia dầu khí, quản lý dự án, biên tập viên, nhà sáng tạo và nhà phát triển, mỗi người đều có