Google sheet, App Script, Web app | Tạo button Print để In nội dung trên trang html có ngắt trang in
Giáo án link (giaoan.link) chia sẻ tiếp đến các bạn project Google sheet, App Script, Web app | Tạo button Print để In nội dung trên trang html có ngắt trang in. Qua ví dụ này bạn sẽ biết cách tạo một nút “Print” để in nội dung trên thẻ div html và bạn có thể áp dụng vào nhiều dự án riêng của bạn. Dưới đây là code mẫu và video hướng dẫn để bạn tham khảo.
Xem thêm nhiều project excel khác:
- Google sheet Webapp Script | Tìm kiếm, lọc và In chi tiết thông tin sản phẩm của mã Khách hàng
- Google sheet Apps script | Data Entry Popup From – Thêm mới – Chỉnh sửa – Xóa
- Google sheet Webapp Script | Quản lý đặt xe cho chuyến đi – Tài xế cập nhật hoàn thành thông tin
- Apps script Webapp | Lấy giá trị Input hiển thị lên – Web Get value input field display on web
- Google sheet Apps script | Todo List and Send mail – Tạo danh sách nhắc việc và gửi mail
- Web App Script | Bộ Icon CSS Rất dễ lập trình cho giao diện webapp
- Google sheet Webapp | Project Quản lý khách hàng – Cập nhật tiến độ sửa chữa
- Google sheet Apps script Webapp | Login form OTP xác minh qua email, Chuyển link cho từng User
- Web App Script CSS JS | Tạo hiệu ứng Click button Nổ tung các mảnh giấy và chuyển link
- Web App Script CSS | Tạo button Liên hệ gồm 3 option đẹp mắt cho trang web
Code file “Code.gs”
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
Code file “index.html”
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
.table,tr,td{
text-align: justify;
width:"100%";
border: 2px solid red;
}
</style>
<script>
function Print(DivID) {
var iPrint = document.getElementById(DivID).innerHTML;
var docprint=window.open("","");
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('<head><meta name="viewport" content="width=device-width,initial-scale=1.0">');
docprint.document.write('<title>Pritting example</title>');
docprint.document.write('<style type="text/css">@page {size: A4; margin: 2cm 2cm 2cm 2cm;}'); //top-right-buttom-left
docprint.document.write('table,td,tr{ border:1px solid red; text-align: justify; padding: 5px; border-collapse: collapse; width: 100%;}</style>');
docprint.document.write('</head><center><body onLoad="self.print()">');
docprint.document.write(iPrint);
docprint.document.write('</body></center></html>');
docprint.document.close();
docprint.focus();
}
</script>
</head>
<body>
<!--Printting-->
<div id='PrintDiv'>
<table>
<tr >
<td>
NỘI DUNG BẠN CẦN IN BẠN ĐẶT VÀO ĐÂY
</td>
</tr>
</table>
<div style='page-break-before: always;'></div>
<span>NOI DUNG O TRANG THU HAI</span>
</div>
<!--Printting-->
<br>
<div style="text-align:center">
<input type="button" class="btn btn-secondary" name="btnprint" value="PRINT" onclick="Print('PrintDiv')" style="width:20%">
</div>
</body>
</html>