react 实现dom打印功能 附代码

Posted 2022-01-08 大唐荣华

原理：通过 html2canvas 转换生成base64图片数据，再调用浏览器的打印功能

打印方法：

    /* 打印功能 */
    const printById = () => 
        var ele: htmlElement | null = document.getElementById('你要打印的dom节点') // 注意这里要换成id ！！！
        if (!ele) 
            return
        
        html2canvas(ele).then(canvas => 
            canvas.id = "mycanvas";
            // 生成base64图片数据  
            var dataUrl = canvas.toDataURL('image/png');
            var newImg = document.createElement("img");
            newImg.src = dataUrl;
            var jubuData: any = ele?.innerHTML;
            window.document.body.innerHTML = jubuData;
            document.write('<img src="' + newImg.src + '" style="width:100%; height:auto" />')
            setTimeout(() => 
                window.print();
                window.location.reload()
            , 100)
            return false;
        )