最近在有網頁打印需求，嘗試了一下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> 獲得

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

react + antd 實現打印功能（踩了不少坑）