react 实现dom打印功能附代码

最新推荐文章于 2024-07-25 01:05:21 发布

大唐荣华

最新推荐文章于 2024-07-25 01:05:21 发布

阅读量844

点赞数 2

分类专栏：大前端文章标签： react.js javascript 前端 dom 打印

本文链接：https://blog.csdn.net/weixin_40599109/article/details/122000939

版权

大前端专栏收录该内容

157 篇文章 15 订阅

订阅专栏

原理：通过 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;
        })
    }