Plug-in rất hữu ích. Không còn nghi ngờ gì nữa, một trình cắm có thể cung cấp các tính năng dễ sử dụng sẽ giúp tùy chỉnh các ứng dụng của bạn. Bạn có thể tìm thấy nhiều trình cắm sẽ chuyển đổi bảng HTML của bạn thành tài liệu PDF. Tuy nhiên, ở đây tôi sẽ chỉ cho bạn cách nó có thể được thực hiện mà không cần một trình cắm, nghĩa là chuyển đổi toàn bộ bảng HTML thành tài liệu PDF, cùng với kiểu bảng, sử dụng JavaScript đơn giản. Show  Bạn có thể sử dụng đối tượng cửa sổ JavaScript để hoàn thành nhiệm vụ này. Nó rất đơn giản. Hãy cùng xem ví dụ.window object to accomplish this task. It is very simple. Let’s see the example. Đánh dấu và kịch bản <html>
<head>
<title>Convert Table to PDF using JavaScript</title>
<style>
table {
width: 300px;
}
table, th, td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
</style>
</head>
<body>
<div id="tab">
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Job</th>
</tr>
<tr>
<td>Brian</td>
<td>41</td>
<td>Blogger</td>
</tr>
<tr>
<td>Matt</td>
<td>25</td>
<td>Programmer</td>
</tr>
<tr>
<td>Arun</td>
<td>39</td>
<td>Writter</td>
</tr>
</table>
</div>
<p>
<input type="button" value="Create PDF"
id="btPrint" onclick="createPDF()" />
</p>
</body>
<script>
function createPDF() {
var sTable = document.getElementById('tab').innerHTML;
var style = "<style>";
style = style + "table {width: 100%;font: 17px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px;text-align: center;}";
style = style + "</style>";
var win = window.open('', '', 'height=700,width=700');
win.document.write('<html><head>');
win.document.write('<title>Profile</title>');
win.document.write(style);
win.document.write('</head>');
win.document.write('<body>');
win.document.write(sTable);
win.document.write('</body></html>');
win.document.close();
win.print();
}
</script>
</html>Thử nó Tất cả các trình duyệt Mordern hỗ trợ đối tượng cửa sổ. Bây giờ, điều này là tốt. Tôi đang mong đợi các phương pháp trên sẽ hoạt động hoàn hảo trong bất kỳ trình duyệt nào.window object. Now, this is good. I am expecting the above methods to work flawlessly in any browser. Đầu tiên, tôi đang trích xuất nội dung từ bảng HTML. Tôi đã định nghĩa phong cách; Nó giống như kiểu CSS trong phần đánh dấu.extracting the contents from the HTML table. I have defined the style; it’s the same as the CSS style in the markup section. Bạn có biết: Bạn có thể dễ dàng in tài liệu PDF trực tiếp từ trang web của mình bằng JavaScript? Ở đây, phương pháp. Do you know: you can easily print a PDF document directly from your web page using JavaScript? Here’s the method. Tiếp theo, tôi đang tạo một đối tượng cửa sổ. Phương thức Open () sẽ mở một cửa sổ mới. Tôi đang tạo một trang HTML trong cửa sổ mới và thêm nội dung kiểu và bảng vào cửa sổ. Khi trang được tạo, tôi sẽ đóng cửa sổ và in nội dung của cửa sổ.open() method will open a new window. I am creating a HTML page in the new window and adding the style and table contents to the window. Once the page is created, I’ll close the window and print the contents of the window as it is. Lưu tệp dưới dạng PDF. Đó là nó.as PDF. That’s it. Cách mở nhiều cửa sổ trình duyệt bằng phương thức JavaScript "window.open ()" How to open multiple Browser Windows using JavaScript
"window.open()" Method Cảm ơn vì đã đọc. ☺☺ ← Trước đó →Next → Trong bài viết này, tôi sẽ giải thích với một ví dụ, cách chuyển đổi (xuất) bảng HTML sang tệp PDF bằng JavaScript. Bảng HTML trước tiên sẽ được chuyển đổi thành Canvas HTML5 bằng plugin HTML2Canvas và sau đó Canvas HTML5 sẽ được xuất sang tệp PDF bằng plugin PDFMake trong JavaScript. Đánh dấu HTML Đánh dấu HTML sau đây bao gồm một bảng HTML và một nút. <html xmlns="http://www.w3.org/1999/xhtml"> <head> & nbsp; & nbsp; & nbsp;<title>title> & nbsp; & nbsp; & nbsp; & nbsp;<style type="text/css"> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hìnhbody & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; { & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;font-family: Arial; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;font-size: 10pt; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; bàntable & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; { & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;border: 1px solid #ccc; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;border-collapse: collapse; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; bàntable th & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; { & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;background-color: #F7F7F7; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;color: #333; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }font-weight: bold; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; bàntable th, table td & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; { & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;padding: 5px; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;border: 1px solid #ccc; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp;style> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; TABLETHhead> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; TABLETHbody> & nbsp; & nbsp; & nbsp; & nbsp;<table id="tblCustomers" cellspacing="0" cellpadding="0"> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình<tr> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {<th>Customer Idth> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;<th>Nameth> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;<th>Countryth> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hìnhtr> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình<tr> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {<td>1td> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;<td>John Hammondtd> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;<td>United Statestd> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hìnhtr> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình<tr> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {<td>2td> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;<td>Mudassar Khantd> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;<td>Indiatd> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hìnhtr> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình<tr> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {<td>3td> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;<td>Suzanne Mathewstd> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;<td>Francetd> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hìnhtr> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình<tr> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {<td>4td> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;<td>Robert Schidnertd> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;<td>Russiatd> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hìnhtr> & nbsp; & nbsp; & nbsp;table> & nbsp; & nbsp; & nbsp;<br /> & nbsp; & nbsp; & nbsp;<input type="button" id="btnExport" value="Export" onclick="Export()" /> & nbsp; & nbsp; & nbsp;<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js">script> & nbsp; & nbsp; & nbsp;<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js">script> & nbsp; & nbsp; & nbsp;<script type="text/javascript"> & nbsp; & nbsp; & nbsp; & nbsp;function Export() { & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; thân hình'tblCustomers'), { & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {function (canvas) { & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Phông chữ-gia đình: Arial;var data = canvas.toDataURL(); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kích thước phông chữ: 10pt;var docDefinition = { & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; bàn & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Chiều rộng: 500 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }] & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; pdfmake.CreatePdf (docDefDef) .doLoad ("Bảng.pdf");"Table.pdf"); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp;script> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Suzanne Mathewsbody> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Suzanne Mathewshtml> Explanation: Khi nút xuất được nhấp, chức năng JavaScript xuất được gọi. Bên trong chức năng xuất, bảng HTML được chuyển đổi thành Canvas HTML5 bằng plugin HTML2Canvas và sau đó Canvas HTML5 sẽ được xuất sang PDF bằng plugin PDFMake. Ảnh chụp màn hình Bảng HTML Tệp PDF được tải xuống khi nhấp vào nút Xuất Tệp PDF được tạo tính tương thích của trình duyệt web Mã trên đã được kiểm tra trong các trình duyệt sau chỉ trong các phiên bản hỗ trợ HTML5.
* Tất cả các logo trình duyệt được hiển thị ở trên là thuộc tính của chủ sở hữu tương ứng của họ. Thử nghiệm Tải xuống Tải xuống API Word/PDF/Excel miễn phí Bình luận Không có ý kiến đã được thêm vào bài viết này. Làm cách nào để xuất trang HTML của mình dưới dạng PDF bằng JavaScript?Tạo PDF bằng cách sử dụng JavaScript Chỉ định nội dung trong Phương thức Text () của đối tượng JSPDF. Sử dụng phương thức addPage () để thêm trang mới vào pdf. Sử dụng phương thức Save () để tạo và tải xuống tệp PDF.Specify the content in text() method of jsPDF object. Use the addPage() method to add new page to PDF. Use the save() method to generate and download PDF file.
Làm cách nào để chuyển đổi HTML thành PDF theo cách thủ công?Trên máy tính Windows, hãy mở một trang web HTML trong Internet Explorer, Google Chrome hoặc Firefox. Trên máy Mac, mở một trang web HTML trong Firefox. Nhấp vào nút Chuyển đổi sang PDF, trong thanh công cụ Adobe PDF để bắt đầu chuyển đổi PDF. Nhập tên tệp và lưu tệp PDF mới của bạn vào một vị trí mong muốn.
Làm cách nào để lưu một bảng từ một trang web dưới dạng pdf?Làm thế nào để sử dụng nó:.. Tải xuống và đặt JavaScript Tablehtmlexport. JS sau JQuery. .... Tải JSPDF và JSPDF. cắm vào. .... Xuất bảng HTML của bạn sang các tệp JSON, CSV, TXT hoặc PDF.xem nguồn..... Đặt các cột & hàng để bỏ qua..... Đặt hướng cho đầu ra PDF..... Nhiều tùy chọn tùy chỉnh để tùy chỉnh plugin xuất bảng .. Làm cách nào để chuyển đổi bảng thành PDF?Chuyển đổi một bảng thành PDF với chức năng lưu dưới dạng.. Chọn bảng bạn muốn chuyển đổi sang PDF, nhấp vào Tệp> Lưu dưới dạng> Duyệt..... Trong cửa sổ Lưu dưới dạng, chọn PDF từ Lưu dưới dạng danh sách Loại và đặt tên cho Tệp, sau đó nhấp vào Tùy chọn .. Trong hộp thoại Tùy chọn, kiểm tra lựa chọn trong xuất bản phần nào .. Nhấp vào OK> Lưu .. |
