CSS控制只打印某個標籤內的內容
阿新 • • 發佈：2020-09-15
在做頁面時，希望點選"列印"按鈕，只把printonly中的內容打印出來，程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> @media print { .noprint, input { display: none; } .printonly { display: block; } } </style> </head> <body> <div class="noprint"> 這裡是不需要列印的內容 </div> <div class="printonly"> 這裡寫要列印的內容 </div> <input onClick="print()" value="點選列印" type="button"> </body> </html>
- @media print裡面的內容只對打印出來的內容有效，之外的內容就是螢幕顯示的樣式。
- 隱藏不需要使用display：none；
- 儘量不要讓內容浮動，有些瀏覽器列印浮動的元素時，會截去浮動元素中的內容。