Tạo nút in bài viết với JavaScript trong khi thiết kế website
Khi thiết kế trong chi tiết cho bài viết chúng ta thường gắn nút in với mục đích giúp người dùng có thể in được nội dung bài viết.
Tuy nhiên chúng ta chỉ muốn in phần nội dung bài viết chứ không phải in cả trang giao diện website. Bài viết này hướng dẫn các bạn tạo nút in bằng javascript, điểm đặc biệt là chỉ in phần nội dung bài viết chứ không in cả trang.
Các bước thực hiện như sau:
Ví dụ chúng ta có cấu trúc của trang chi tiết như sau:
Cấu trúc trang chi tiết:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo nút in</title>
</head>
<body>
<header>Tiêu đề trang header + logo</header>
<p>IN</p>
<article class="content" id="Content_ID">
<title>Tiêu đề bài viết</title>
<p>Nội dung chi tiết bài viết</p>
</article>
<article class="right"> Thông tin menu phải </article>
<footer>Nội dung cuối trang + thông tin trang</footer>
</body>
</html>
Chú ý: Ở đây chúng ta chỉ cần in nội dung bên trong thẻ <
article> có id=Content_ID.
Để in được nội dung như trên chúng ta chèn thêm đoạn code JavaScript như sau
Chèn code Java Script:
<script>
function In_Content(strid){
var prtContent = document.getElementById(strid);
var WinPrint = window.open('','','letf=0,top=0,width=800,height=800');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
}
</script>
Tiếp theo chúng ta gắn sự kiện onclick cho nút in là xong.
<p><a href="javascript:void(0)" onclick="In_Content('Content_ID')">IN</a></p>
<article class="content" id="content">
<title>Tiêu đề bài viết</title>
<p>Nội dung chi tiết bài viết</p>
</article>
Chú ý: Tham số truyền vào cho hàm là id của thẻ <article>
Kết luận:
Với đoạn code java script trên chúng ta có thể in được nội dung mà chúng ta mong muốn chứ không in toàn bộ giao diện trang. Chúc các bạn thiết kế web tiện lợi.
Lập Trình PHP
- Javascript định dạng tiền phân cách phần ngàn - 26/01/2016
- Hướng dẫn tạo nút lên đầu trang (Back to Top) cho website với Jquery và CSS - 01/01/2016
Các Tin Khác:
Mới Đăng
- Unit 3: My things - Review 1 - 07/08/2024
- Unit 3: My things - Lesson Six - 07/08/2024
- Unit 3: My things - Lesson Five - 07/08/2024
- Unit 3: My things - Lesson Four - 07/08/2024
- Unit 3: My things - Lesson Three - 07/08/2024