react 实现dom打印功能附代码

最新推荐文章于 2024-09-06 11:11:00 发布

大唐荣华

最新推荐文章于 2024-09-06 11:11:00 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

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

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

大前端专栏收录该内容

157 篇文章

订阅专栏

本文介绍了一种使用html2canvas将指定DOM元素转换为Base64图片数据的方法，并利用浏览器的打印功能实现局部页面的打印。此方法首先获取要打印的DOM节点，将其转换成图片数据，然后生成一个包含该图片的临时页面并调用浏览器的打印功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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