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

Thảo luận trong 'HTML' bắt đầu bởi B.N.M.K, 30/3/2017.

  1. B.N.M.K

    B.N.M.K Nothing to lose.. your love to win.. Chuyển tiền

    Bài viết:
    Tìm chủ đề
    5,480
    Xem: 1,729
    Nếu bạn cảm thấy hay, hãy chia sẻ để ủng hộ tác giả
    Để 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;
    }
     
    Chỉnh sửa cuối: 17/8/2019
  2. Đang tải...
Trả lời qua Facebook
Đang tải...