我的世界1.12.2:React如何實現瀏覽器打印部分內容詳析

時間:2019-05-19來源/作者:碼飛_CC 編輯:源碼庫 文章熱度:

我的世界马桶个人空间 www.mqdnk.icu 前言

近期著手項目任務的打印功能,在此作個記錄,本文介紹基于React的一種調用瀏覽器打印頁面指定內容的方法。

整體思路: 通過構建一個隱藏的元素(該元素包裹需打印的內容),當打印行為觸發時,將頁面其他的一些不需要打印的元素隱藏,然后將需打印的元素追加到body中,打印完成后,再恢復初始狀態即可。瀏覽器打印的本質還是將web頁面中的元素打印出來而已。

1. 構建待打印元素

在頁面中構建一個display為none的元素,里面的內容為你需要打印的內容。我們還需要設置包裹打印內容的元素的ref屬性,以便于后面獲取到元素。

<div style={{ display: 'none' }}>
 <div ref={el => (this.printRef = el)}>
 { 打印內容 }
 </div>
</div>

2. 打印動作觸發時的處理

處理流程:

  1. 獲取待打印元素;
  2. 將根元素隱藏;
  3. 將待打印元素追加到body中;
  4. 調用瀏覽器的打印預覽;
  5. 預覽界面關閉后,將待打印元素從body中移除,將原始頁面恢復。
let printView = this.state.printRef //獲取待打印元素
document.querySelector('#root').className = 'print-hide' //將根元素隱藏
document.body.appendChild(printView) //將待打印元素追加到body中
window.print() //調用瀏覽器的打印預覽
document.body.removeChild(printView) //將待打印元素從body中移除
document.querySelector('#root').className = '' //將原始頁面恢復

對應的CSS設置:

@page {
 size: A4;
 margin: 0;
}
@media print {
 html, body {
  min-width: 0;
  width: 210mm; 
  height: 297mm;
 }
 .print-hide {
 visibility: hidden!important;
 display: none!important;
 }
}

其中,@page中的size可以自己設置紙張的大小,如果是A4紙可以直接設置值為A4,媒體查詢@media print中設置的是打印時的樣式,因為打印設備知道其輸出區域的物理大小,所以使用厘米(cm)、毫米(mm)、英寸(in)等作為打印設計的單位完全可行。

補充(其他原生的打印方法)

直接替換body的內容為要打印的內容,之后再重新刷新頁面。

const old = window.document.body.innerHTML //備份原來的頁面
window.document.body.innerHTML = ''
window.document.body.appendChild(/* 將你要打印的內容附加到這 */)
window.print() //調用print()函數時,會跳出打印預覽的界面,以下的代碼被阻塞,關閉預覽界面后繼續執行
window.document.body.innerHTML = old
window.location.reload() //重新加載舊頁面

打開一個新窗口,將打印內容放到新窗口打印,打印結束后關閉新窗口

const newWindow = window.open("打印窗口", "_blank")
const docStr = '<div>test</div>' //需要打印的內容
newWindow.document.write(docStr)
const styles = document.createElement("style")
styles.setAttribute('type', 'text/css') //media="print"
styles.innerHTML = ''
newWindow.document.getElementsByTagName('head')[0].appendChild(styles)
newWindow.print()
newWindow.close()

以上兩種方法可能會造成CSS樣式應用無效的問題。

3. 注意點

第二小節的步驟2中的意思是:將頁面中所有不需要打印的元素隱藏,特別注意像模態窗Model這些元素,也要為它們加上 'print-hide'className屬性。

如果需要在特定位置強制分頁打印,可以嘗試在對應元素上設置page-break-before:always !important、page-break-after:always !importantCSS屬性,該屬性只對塊級元素有效。

進入打印預覽后,我們無法獲知用戶最終是選擇了打印,還是選擇了取消。這里若有人知道解決方法的話,歡迎留言。

React,瀏覽器,打印,部分內容

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對ASPKU源碼庫的支持。


注:相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
相關JavaScript/Ajax教程
熱門標簽

JavaScript/Ajax教程Rss訂閱JavaScript/Ajax教程搜索