[Trước tiên bạn nào chua biết JS – Javascript là gì thì xem thêm tại đây nhé]
Để in một phần tử div với một ID nhất định trong một web page, bạn có thể sử dụng JavaScript hoặc jQuery. Dưới đây là các bước chi tiết để thực hiện điều này với Javascript:
Bước 1: Thêm CSS để hiển thị border khi in
Bạn có thể sử dụng CSS với media query để chỉ áp dụng các quy tắc CSS này khi in. Thêm đoạn mã CSS sau vào tệp CSS của bạn hoặc trong thẻ <style>
trong tệp HTML:
Bước 2: Tạo phần tử div chứa bảng cần in
Đảm bảo rằng bạn có phần tử div với ID mà bạn muốn in và một bảng trong đó. Ví dụ:
Bước 3: Tạo nút và hàm JavaScript để in phần tử div
Thêm nút và hàm JavaScript để in phần tử div:
<button onclick="printDiv('divToPrint')">In nội dung</button>
<script>
function printDiv(divId) {
var divToPrint = document.getElementById(divId);
var newWin = window.open('', 'Print-Window');
newWin.document.open();
newWin.document.write('<html><head><title>In nội dung</title>');
newWin.document.write('<style>@media print { table { border-collapse: collapse; } table, th, td { border: 1px solid black; } }</style>');
newWin.document.write('</head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();}, 10);
}
</script>
Tổng hợp lại
Kết hợp tất cả các phần lại, trang HTML của bạn sẽ trông như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In nội dung div</title>
<style>
@media print {
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
}
</style>
</head>
<body>
<button onclick="printDiv('divToPrint')">In nội dung</button>
<div id="divToPrint">
<h1>Tiêu đề</h1>
<table>
<tr>
<th>Tiêu đề cột 1</th>
<th>Tiêu đề cột 2</th>
</tr>
<tr>
<td>Nội dung 1</td>
<td>Nội dung 2</td>
</tr>
</table>
</div>
<script>
function printDiv(divId) {
var divToPrint = document.getElementById(divId);
var newWin = window.open('', 'Print-Window');
newWin.document.open();
newWin.document.write('<html><head><title>In nội dung</title>');
newWin.document.write('<style>@media print { table { border-collapse: collapse; } table, th, td { border: 1px solid black; } }</style>');
newWin.document.write('</head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();}, 10);
}
</script>
</body>
</html>
Khi bạn nhấp vào nút “In nội dung”, hàm printDiv
sẽ được gọi và in nội dung của phần tử div có ID “divToPrint”, bao gồm cả border của bảng.
Comments