Trong bài viết này, chúng ta sẽ xem cách chuyển đổi HTML sang PDF bằng JavaScript. Đị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. JavaScript là cách dễ nhất để chuyển đổi HTML sang PDF và có sẵn nhiều thư viện JavaScript khác nhau để tạo PDF từ HTML. jsPDF là một trong những thư viện tốt nhất để chuyển đổi HTML sang PDF bằng JavaScript
Vì vậy, hãy xem tạo PDF bằng javascript, chuyển đổi HTML sang PDF bằng jquery, jspdf HTML sang PDF, HTML sang PDF javascript, jquery chuyển đổi HTML sang PDF, jspdf chuyển đổi HTML sang PDF
Ví dụ. Cách chuyển đổi HTML sang PDF bằng JavaScript
Đầu tiên, chúng ta sẽ tạo một Trang HTML để chuyển đổi HTML sang PDF. Thêm đoạn mã sau vào trang HTML của bạn
How To Convert HTML To PDF Using JavaScript - Techsolutionstuff
Company Name
Employee Name
Country
Dell
Maria
Germany
Asus
Francisco
Mexico
Apple
Roland
Austria
HP
Helen
UK
Lenovo
Yoshi
Canada
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đọc thêm. Cách vô hiệu hóa nhấp chuột phải bằng jQuery
Thêm phong cách của trang HTML này
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th{
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
background-color: #111;
color:white;
}
tr:nth-child[odd] {
background-color: #dddddd;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đọc thêm. Kính lúp hình ảnh jQuery khi di chuột
Thêm đoạn mã sau vào trang HTML để chuyển đổi sang pdf
$[document].ready[function [] {
var form = $['.form'],
cache_width = form.width[],
a4 = [595.28, 841.89]; // for a4 size paper width and height
$['#create_pdf'].on['click', function [] {
$['body'].scrollTop[0];
createPDF[];
}];
function createPDF[] {
getCanvas[].then[function [canvas] {
var
img = canvas.toDataURL["image/png"],
doc = new jsPDF[{
unit: 'px',
format: 'a4'
}];
doc.addImage[img, 'JPEG', 20, 20];
doc.save['Bhavdip-html-to-pdf.pdf'];
form.width[cache_width];
}];
}
function getCanvas[] {
form.width[[a4[0] * 1.33333] - 80].css['max-width', 'none'];
return html2canvas[form, {
imageTimeout: 2000,
removeContainer: true
}];
}
}];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bạn cũng có thể thích
đọc thêm. Laravel 8 Tạo PDF bằng DomPDF
đọc thêm. Cách tạo PDF từ chế độ xem HTML trong Laravel
đọc thêm. Cách lấy giá trị danh sách hộp kiểm đã chọn trong Jquery
Trong bài viết trước, chúng tôi đã giải thích về cách chuyển đổi html sang word bằng javascript hoặc cách đọc pdf bằng Javascript hoặc đọc excel bằng Javascript, nhưng trong bài viết này, chúng ta sẽ đọc về cách chuyển đổi html sang pdf bằng Javascript hoặc JS một cách dễ dàng với
Chuyển đổi HTML sang PDF bằng jsPDF
Trước tiên hãy xem xét ví dụ, đối với html sang pdf bằng thư viện jsPDF, vì nó dễ dàng hơn nhiều, vì vậy trong ví dụ này, chúng tôi sẽ sử dụng jsPDF, bạn có thể tải xuống từ https. //github. com/MrRio/jsPDF hoặc bạn cũng có thể sử dụng liên kết cdn '//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js'
Khi chúng tôi đã tải xuống jsPDF, chỉ cần tạo đối tượng "var doc = new jsPDF[]" và sau đó xuất trực tiếp HTML sang PDF như hình bên dưới
function generatePDF[] {
var doc = new jsPDF[]; //create jsPDF object
doc.fromHTML[document.getElementById["test"], // page element which you want to print as PDF
15,
15,
{
'width': 170 //set width
},
function[a]
{
doc.save["HTML2PDF.pdf"]; // save file name as HTML2PDF.pdf
}];
}Hãy xem xét việc kiểm tra ví dụ hoàn chỉnh, đây là HTML
This is p one
More Text to be printed on PDF
Dowload PDF
Nếu bạn muốn bao gồm hình ảnh trong chuyển đổi HTML sang PDF bằng Javascript trong jsPDF, bạn có thể bao gồm mã base64 của hình ảnh, vì vậy đây là ví dụ hoàn chỉnh, bao gồm cả hình ảnh trong chuyển đổi
đầu ra
Thêm cấu hình bằng jsPDF
Nếu bạn muốn xóa một phần của PDF khỏi trang hoàn chỉnh, bạn có thể đề cập đến nó trong chức năng specialElementHandler, đây là giải thích thêm về cấu hình bằng cách sử dụng jsPDF trong nhận xét kèm theo ví dụ
var pdf = new jsPDF['p', 'pt', 'letter']; //letter = letter size pdf
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $['#content'][0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ["#iAmID", "div", "span" etc.]
// There is no support for any other type of selectors
// [class, of compound] at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function [element, renderer] {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML[
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, // y coord
{
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function [dispose] {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save['Filename.pdf'];
}, margins
];Chuyển đổi hình ảnh sang base64 bằng html2canvas
Nếu bạn không có mã hình ảnh base64, thì bạn có thể chuyển đổi html sang pdf bằng hình ảnh bằng HTML2Canvas với jsPDF
HTML2Canvas sẽ chuyển đổi hình ảnh của bạn thành mã base64 và sau đó nó sẽ giúp bạn in pdf dễ dàng hơn
Đây là bản demo fiddle cho nó
Các plugin khác có thể hữu ích cho việc chuyển đổi html sang pdf là
HTML sang PDF mà không cần sử dụng bất kỳ thư viện Javascript nào
Trong ví dụ trên, chúng tôi đang sử dụng thư viện jsPDF, nhưng bây giờ chúng tôi sẽ chuyển đổi nó bằng mã Javascript đơn giản, mặc dù mã này không trực tiếp chuyển đổi HTML sang PDF, nhưng nó sẽ mở hộp thoại để in hoặc lưu HTML dưới dạng PDF, đây là