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
jsPDF có thể sử dụng plugin. Để cho phép nó in HTML, bạn phải bao gồm một số plugin nhất định và do đó phải thực hiện các thao tác sau
- Truy cập https. //github. com/MrRio/jsPDF và tải xuống Phiên bản mới nhất
- Bao gồm các Tập lệnh sau trong dự án của bạn
- jspdf. js
- jspdf. cắm vào. from_html. js
- jspdf. cắm vào. split_text_to_size. js
- jspdf. cắm vào. standard_fonts_metrics. js
Nếu bạn muốn bỏ qua một số phần tử nhất định, bạn phải đánh dấu chúng bằng ID, sau đó bạn có thể bỏ qua ID này trong trình xử lý phần tử đặc biệt của jsPDF. Do đó, HTML của bạn sẽ trông như thế này
don't print this to pdf
print this to pdf
Sau đó, bạn sử dụng mã JavaScript sau để mở tệp PDF đã tạo trong Cửa sổ bật lên
var doc = new jsPDF[];
var elementHandler = {
'#ignorePDF': function [element, renderer] {
return true;
}
};
var source = window.document.getElementsByTagName["body"][0];
doc.fromHTML[
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
}];
doc.output["dataurlnewwindow"];
Đối với tôi, điều này đã tạo ra một tệp PDF đẹp và gọn gàng chỉ bao gồm dòng 'in tệp này thành pdf'
Xin lưu ý rằng trình xử lý phần tử đặc biệt chỉ xử lý ID trong phiên bản hiện tại, điều này cũng được nêu trong Vấn đề GitHub. Nó nói
Bởi vì việc so khớp được thực hiện với mọi phần tử trong cây nút, mong muốn của tôi là làm cho nó nhanh nhất có thể. Trong trường hợp đó, điều đó có nghĩa là "Chỉ các ID phần tử được khớp" Các ID phần tử vẫn được thực hiện theo kiểu jQuery "#id", nhưng điều đó không có nghĩa là tất cả các bộ chọn jQuery đều được hỗ trợ
Do đó, thay thế '#ignorePDF' bằng bộ chọn lớp như '. bỏ quaPDF' không hoạt động đối với tôi. Thay vào đó, bạn sẽ phải thêm cùng một trình xử lý cho từng và mọi phần tử mà bạn muốn bỏ qua như
var elementHandler = {
'#ignoreElement': function [element, renderer] {
return true;
},
'#anotherIdToBeIgnored': function [element, renderer] {
return true;
}
};
Từ các ví dụ, người ta cũng nói rằng có thể chọn các thẻ như 'a' hoặc 'li'. Mặc dù vậy, điều đó có thể là một chút không hạn chế đối với hầu hết các trường hợp sử dụng
Chúng tôi hỗ trợ các trình xử lý phần tử đặc biệt. Đăng ký chúng với bộ chọn ID kiểu jQuery cho ID hoặc tên nút. ["#iAmID", "div", "span", v.v. ] Không có hỗ trợ cho bất kỳ loại bộ chọn nào khác [loại, hợp chất] tại thời điểm này
Một điều rất quan trọng cần thêm là bạn mất tất cả thông tin về kiểu dáng [CSS]. May mắn thay, jsPDF có thể định dạng độc đáo h1, h2, h3, v.v. , đó là đủ cho mục đích của tôi. Ngoài ra, nó sẽ chỉ in văn bản trong các nút văn bản, có nghĩa là nó sẽ không in các giá trị của vùng văn bản và những thứ tương tự. Ví dụ