前端打印可通過多種方案實現，1.window.print()最簡單但樣式受限；2.iframe打印更靈活需處理內容加載；3.css@media print可自定義打印樣式；4.第三方庫功能強但增加項目負擔；5.后端渲染pdf最可靠但耦合前后端。選擇方案需根據需求權衡，如簡單打印用window.print()，樣式控制可用iframe或css@media print，生成pdf則選第三方庫或后端渲染。解決樣式錯亂可通過定義打印樣式、簡化css、跨瀏覽器測試等方式。隱藏元素可用.no-print類加display:none，分頁打印用page-break屬性控制，頁眉頁腳通過@page規則設置，但需注意兼容性問題。
頁面打印，說白了，就是把網頁內容弄到紙上。JS能搞定這事兒，而且方法還不少。下面就來聊聊前端打印的幾種實現方案，不保證完美，但絕對實用。
幾種實現方案：
-
window.print()：最簡單粗暴的方式
立即學習“前端免費學習筆記（深入）”；
這是JS自帶的方法，調用后會直接彈出瀏覽器的打印對話框。優點是簡單，缺點是樣式控制有限，基本就是瀏覽器默認的打印樣式。如果你對樣式要求不高，或者懶得折騰，這個方法絕對夠用。
-
iframe 打?。红`活但略復雜
創建一個隱藏的 iframe，把需要打印的內容放到 iframe 里，然后調用 iframe 的 window.print() 方法。這種方式的好處是可以自定義 iframe 里的樣式，更靈活。但是，你需要處理 iframe 的創建、內容加載等問題，稍微復雜一點。
-
CSS @media print：樣式控制的利器
通過 CSS 的 @media print 媒體查詢，可以為打印頁面定義專門的樣式。例如，隱藏不需要打印的元素，調整字體大小，等等。這種方式配合 window.print() 使用，可以實現比較好的打印效果。
-
第三方打印庫：功能強大但引入成本
市面上有一些專門的JS打印庫，比如 jsPDF、printThis 等。這些庫功能強大，可以生成PDF、自定義打印樣式等。但是，引入第三方庫會增加項目的復雜度和體積，需要權衡利弊。
-
后端渲染PDF：最可靠但前后端耦合
把打印內容發送到后端，由后端生成PDF文件，然后前端下載PDF打印。這種方式最可靠，可以保證打印效果的一致性。但是，需要后端配合，前后端耦合度較高。
如何選擇合適的打印方案？
選擇哪種方案，取決于你的具體需求。如果只是簡單打印，window.print() 就夠了。如果需要自定義樣式，可以考慮 iframe 打印或 CSS @media print。如果需要生成PDF，或者對打印效果有極高的要求，可以考慮第三方打印庫或后端渲染PDF。
如何解決打印樣式錯亂的問題？
打印樣式錯亂是前端打印常見的問題。原因有很多，比如瀏覽器兼容性問題、CSS樣式沖突等。解決這個問題，可以嘗試以下方法：
- 使用 CSS @media print 定義打印樣式：這是最有效的方法。
- 避免使用復雜的CSS樣式：盡量使用簡單的CSS樣式，減少瀏覽器解析的負擔。
- 測試不同瀏覽器的打印效果：確保在主流瀏覽器上打印效果一致。
- 使用第三方打印庫：一些打印庫對打印樣式有更好的支持。
如何隱藏不需要打印的元素？
有時候，我們只需要打印頁面的一部分內容，而不是全部。可以使用 CSS 的 display: none; 或 visibility: hidden; 屬性來隱藏不需要打印的元素。但是，要注意 display: none; 會完全移除元素，而 visibility: hidden; 只是隱藏元素，但仍然占據空間。
@media print { .no-print { display: none; } }
在需要隱藏的元素上添加 no-print 類即可。
如何實現分頁打印？
如果頁面內容過多，需要分頁打印?？梢允褂?CSS 的 page-break-before 和 page-break-after 屬性來控制分頁。
.page-break { page-break-before: always; /* 在元素之前分頁 */ /* page-break-after: always; 在元素之后分頁 */ }
在需要分頁的元素上添加 page-break 類即可。注意，分頁效果可能受到瀏覽器和打印機的影響，需要進行測試。
如何在打印頁眉頁腳添加內容？
在打印頁眉頁腳添加內容，可以使用 CSS 的 @page 規則。
@page { @top-left { content: "頁眉左側內容"; } @top-right { content: "頁眉右側內容"; } @bottom-left { content: "頁腳左側內容"; } @bottom-right { content: "頁腳右側內容"; } }
這種方式可以自定義頁眉頁腳的內容，但是兼容性可能存在問題，需要進行測試。
總而言之，前端打印是一個比較繁瑣的事情，需要根據具體情況選擇合適的方案，并進行充分的測試。希望這些方案能幫助你解決前端打印的問題。
