html+jquery页面实现将echarts打印

最新推荐文章于 2023-05-23 18:07:33 发布

原创最新推荐文章于 2023-05-23 18:07:33 发布 · 525 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

20 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

本文介绍了一种将网页内容转换为A4纸张大小图片的方法，并提供了具体实现步骤。利用html2canvas库，可以将指定区域的内容截图，并将其转换为图片格式，最终通过浏览器的打印功能输出。

需求：将页面中的内容打印到A4纸上

实现原理：将页面内容截图并添加到页面元素，使用htmlCanvas进行打印

html部分

被打印资源

<div id="print-wrap">
    ..内容
</div>

打印内容的暂存位置
<div id="reocrd-wrap">
     <img id="screenShotImg" style="" />
</div>

js部分

 function submitHandler(){
            // 点击导出按钮
            html2canvas(document.querySelector("#print-wrap")).then(function (canvas) {
                //获取截取图片路径
                var base64Url = canvas.toDataURL('image/png');
                var oImg = new Image();
                // 导出图片
                oImg.src = base64Url;
                document.getElementById("screenShotImg").src = base64Url;

                oImg.onload=function(){
                    var newstr = document.getElementById("reocrd-wrap").innerHTML;
                    var printWindow = window.open();
                    printWindow.document.write(newstr);
                    printWindow.print();
                    document.getElementById('screenShotImg').setAttribute('src','')
                }
            });
        }

需要htmlCanvs.js的支持，附上链接 http://html2canvas.hertzen.com/

将js复制到工程中并引入