react + antd 实现打印功能（踩了不少坑）

Posted 2021-01-31 jlj9520

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

踩了不少坑，希望对大家有帮助。。。。