react + antd 实现打印功能（踩了很多坑）

最近在有网页打印需求，尝试了一下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> 得到

踩了很多坑，但愿对你们有帮助。。。。