js使用window.print()來實現打印功能

1.首先在需要打印的內容標簽上面綁定ref

<div ref="tableRef">需要打印的內容 </div> <!--點擊按鈕打印--> <el-button @click="billPrintClick" >打印</el-button>

2.按鈕打印事件

billPrintClick() {let newstr = this.$refs.tableRef.innerHTML // 獲取需要打印的內容let oldstr = document.body.innerHTML // 獲取別打印頁面的內容document.body.innerHTML = newstr // 獲取表格表頭，表格內容改變打印內容字體的顏色document.getElementsByTagName('thead')[0].style.color = '#000'document.getElementsByTagName('tbody')[0].style.color = '#000'window.print()document.body.innerHTML = oldstrwindow.location.reload() // 退出刷新頁面return false }

3.設置打印布局（橫向、縱向、邊距）

@media print {@page {// 縱向size: portrait; // 橫向size: landscape;// 邊距margin: 0cm 0cm 0cm 0cm;}}

4.去除瀏覽器默認頁眉頁腳
打印時默認有頁眉頁腳信息，顯示在頁面外邊距范圍，我們可以通過去除頁面模型page的外邊距，使其隱藏頁眉頁腳信息，再通過設置 body 元素的 margin 來保證打印出來的頁面帶有外邊距

@media print {@page {margin: 0;}body {margin: 1cm;} }

window.open()使用新窗口打印
我們還可以使用新窗口打印，將要打印的HTML，賦值給新窗口的body，打印之后我們再將之關閉

// 獲取打印的區域 let newstr = this.$refs.tableRef.innerHTML; // 將打印的區域賦值給新窗口body，進行打印 let newWindow = window.open('',''); newWindow.document.write(newstr); newWindow.window.print(); newWindow.window.close(); // 打印完成后關閉后新窗口

總結

以上是生活随笔為你收集整理的js使用window.print()实现打印功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。