最近在有網頁列印需求，嘗試了一下react的列印功能，遇到了不少的坑：

1.react本身有一些列印的元件，但都不好用，都是基於window.print()，但是window.print()如果直接列印的話，沒有樣式。處理直接當前網頁的body設定為你要列印的區域，但是當你取消列印的時候你會發現整個網頁都被你要列印的區域佔滿了，你還得用window.reload()重新載入一下頁面，使用者互動很不好，建議不要採用這種方式。

2.樣式的問題，我們可以通過寫內聯樣式解決，嘗試了react的react-inline-css也沒試成功。所以，當你頁面有列印功能時，列印的區域最好是用內聯樣式完成。

3.為了解決1中提到的使用者互動問題，可以使用iframe的方式解決，具體單面如下：

print=(id)=>{
        const el = document.getElementById(id);
        const iframe = document.createElement('IFRAME');
        let doc = null;
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
        document.body.appendChild(iframe);
        doc 
 
= iframe.contentWindow.document;
        // 引入列印的專有CSS樣式，根據實際修改
        // doc.write('<LINK rel="stylesheet" type="text/css" href="css/print.css">');
        doc.write(el.innerHTML);
        doc.close();
        // 獲取iframe的焦點，從iframe開始列印
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        
 
if (navigator.userAgent.indexOf("MSIE") > 0)
        {
            document.body.removeChild(iframe);
        }
    }

4.二維碼無法列印問題：react中一般生成二維碼都是用react.qrcode，但是發現這玩意生成的是canvas，不是圖片，列印的時候預覽不出來。所以我想進一切辦法去把canvas轉成圖片，無奈拿不到這個canvas標籤。最後還是用js的qrcode來生成二維碼，這樣生成的預設是base64位的圖片，列印正常。程式碼如下：

const QRCode =  require('qrcode')

// 由於是非同步的生成，所以最好是通過設定狀態來改變二維碼圖片
getCode =(value) =>{
    QRCode.toDataURL(value)
    .then(url => {
        this.setState({
            qrcodeImg:url
        })
    })
    .catch(err => {
        console.error(err)
    })
  }
// 前端通過<div><img src={this.state.qrcodeImg} style={{width:"100px",height:"100px"}}></img></div> 獲得

踩了不少坑，希望對大家有幫助。。。。