Tạo nút in bài viết với JavaScript trong khi thiết kế website

JavaScript | Lập Trình PHP | 02/02/2016 | 1684 |

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.

in trang với javascript

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