js使用window.print()來(lái)實(shí)現(xiàn)打印功能

1.首先在需要打印的內(nèi)容標(biāo)簽上面綁定ref

<div ref="tableRef">需要打印的內(nèi)容 </div> <!--點(diǎn)擊按鈕打印--> <el-button @click="billPrintClick" >打印</el-button>

2.按鈕打印事件

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

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

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

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

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

window.open()使用新窗口打印
我們還可以使用新窗口打印，將要打印的HTML，賦值給新窗口的body，打印之后我們?cè)賹⒅P(guān)閉

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。