原理為調用 window.print() 方法，但是該方法只能對當前頁面全部打印，所以有了以下方案來解決局部打印
1: 利用 iframe 將需要打印的元素和樣式注入 再調用打印
// 示例代碼function print () { let ifElement = document.getElementById('ifId') const addHtmlPrint = () => { const content = ifElement.contentWindow || ifElement.contentDocument content.document.body.innerHTML = this.detailTable const styleEle = document.createElement('style') /* 去掉打印時的頁頭和頁腳 */ styleEle.innerHTML = '@media print {@page { margin: 5mm; }}' content.document.getElementsByTagName('head')[0].appendChild(styleEle) /* 保障 iframe 中資源加載完成，圖片要用 img 形式引入 */ ifElement.onload = () => { content.print() } } this.getDetailTable() if (ifElement) { // 若已經創建，則直接打印 addHtmlPrint() } else { ifElement = document.createElement('iframe') ifElement.setAttribute('id', 'ifId') ifElement.setAttribute('style', 'display:none') document.body.appendChild(ifElement) addHtmlPrint() }}2: 利用 @media print，在當前頁面設置打印操作時需要隱藏的元素
@media print{ /* 這里將不需要打印的元素設置為不顯示 */ .hidden-element{ display:none; /* visibility:hidden; */ } /*紙張設置為寬1200px 高800px*/ @page{ size:1200px 800px; }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
