Hướng Dẫn Cách Tạo Nút In Chỉ Một Vùng Trên Trang Web

Để tạo bản in chỉ một vùng trên trang web mà không phải toàn bộ website của bạn bạn có thể dùng 2 cách sau:

Cách 1 - Sử dụng CSS

Cần chèn thêm 1 tệp CSS dành riêng cho bản in vào header khai báo như sau:

Mã:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Trong file print.css bạn cho ẩn đi toàn bộ các vùng không muốn in ra bằng cách thêm mã CSS: display:none !important;

Lưu ý bắt buộc phải có tham số: media="print"

Để cho in toàn bộ màn hình trang web các bạn có thể thêm tham số: media="screen"

Mã:

<link rel="stylesheet" type="text/css" href="print.css" media="screen" />

Để tạo nút gọi bản in trên web site các bạn chèn code sau:

Mã:

<input type="button" value="Print this page" onClick="window.print()">

Hoặc tạo file ảnh, nút bấm liên kết:

<a href="javascript:window.print()"><img src="print.gif"></a>

Hoặc

<a href="whatever.htm" onClick="window.print();return false">Click vào đây để in trang</a>

Cách 2 - Sử dụng Javascript

Để tạo nút bấm in một vùng tùy chọn nào đó các bạn có thể tham khảo đoạn code sau:

Mã:

<div id="printableArea">
      <h1>In đoạn này</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}