Cách chuyển đổi hoặc xuất bảng HTML sang pdf bằng jQuery là một vấn đề lớn đối với các Nhà phát triển ứng dụng web và mỗi khi họ tìm kiếm giải pháp phù hợp, vì vậy Sau khi xem bài đăng này, bạn sẽ không mất quá 5 phút để xuất bảng HTML sang PDF bằng jquery. Bạn không cần tải xuống tệp thư viện fpdf và đưa nó vào tệp của mình. Ở đây tôi sẽ giải thích một cách dễ dàng để xuất bảng HTML sang pdf bằng jQuery với ví dụ
cũng đọc. Cách chuyển đổi tệp HTML sang PDF trong PHP
Ở đây chúng ta sẽ sử dụng hai thư viện html2canvas và pdfmake để hoàn thành yêu cầu của mình. Đầu tiên, html2canva sẽ chuyển đổi Bảng HTML thành Canvas HTML5 sau đó pdfmake sẽ xuất HTML5 Canvas thành tệp PDF
Hãy xem chức năng này bằng cách sử dụng một mã ví dụ. để nó sẽ hữu ích và dễ hiểu hơn cho mọi người
Mục lục
- Tạo một chỉ mục. tệp html
- Xuất bảng HTML sang PDF bằng jQuery
- Hoàn thành mã
- Sự kết luận
Tạo một chỉ mục. tệp html
Một bảng HTML và một nút được bao gồm trong mã HTML sau
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
Chuyển đổi or Export HTML Table to PDF file using jQuery | Trang web hướng dẫn
thân hình
{
họ phông chữ. Arial;
cỡ chữ. 10 điểm;
}
bảng
{
đường viền. 1px rắn #ccc;
sụp đổ biên giới. sụp đổ;
}
bảng thứ
{
màu nền. #F7F7F7;
màu. #333;
độ dày của phông chữ. đậm;
}
bảng th, bảng td
{
phần đệm. 5px;
đường viền. 1px rắn #ccc;
}
Khách hàng Id
Tên
Điện thoại
Địa chỉ
1
John
jhon@gmail.com
0445607456
United States
2
Rohan
rohan@gmail.com
0545607456
Bangluru
3
Pradeep
pradeep@gmail.com
0996507456
Delhi
4
Sonia
sonia@gmail.com
07899607456
Varanasi
Bây giờ chúng tôi sẽ bao gồm hoặc thêm thư viện plugin jQuery bên dưới vào chỉ mục. tệp html
2
3
4
5
6
type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js">
$["body"].bật["nhấp chuột", "#btnExport", function [] {
html2canvas[$['#tblCustomers'][0], {
đã kết xuất. chức năng [canvas] {
var data = canvas.toDataURL[];
var docDefinition = {
nội dung. [{
hình ảnh. dữ liệu,
chiều rộng. 500
}]
};
pdfMake. createPdf[docDefinition]. tải xuống["chi tiết khách hàng. pdf"];
}
}];
}];
Bây giờ sau khi nhấp vào nút Xuất, bạn sẽ nhận được dữ liệu bảng HTML của mình thành tệp pdf. Tệp PDF sẽ tự động tải xuống trên hệ thống của bạn với tên bạn sẽ xác định trong chức năng nhấp vào nút jquery
Xem bản trình diễn
Tải xuống mã
cũng đọc. Cách chuyển đổi HTML sang PDF trong CodeIgniter bằng Thư viện Dompdf
Sự kết luận
Tôi hy vọng bạn thấy hướng dẫn này hữu ích cho dự án của bạn. Chuyển đổi hoặc xuất bảng HTML sang PDF bằng jQuery là một tính năng quan trọng đối với bất kỳ ứng dụng web nào. Vậy là chúng ta đã hoàn thành bước cơ bản bằng cách sử dụng html2canvas và thư viện pdfmake
Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc mở rộng chức năng của tập lệnh này không?
Pradeep Maurya
Pradeep Maurya là Nhà thiết kế & Nhà phát triển web chuyên nghiệp và là Người sáng lập “Trang web hướng dẫn”. Anh ấy sống ở Delhi và thích trở thành một người tự lập. Với tư cách là chủ sở hữu, anh ấy đang cố gắng hết sức để cải thiện nền tảng này từng ngày. Niềm đam mê, sự cống hiến và khả năng ra quyết định nhanh chóng của anh ấy nổi bật so với những người khác. Anh ấy là một người đam mê viết blog và viết trên các ấn phẩm như Dzone, e27. đồng