HTML中打印Echatrs图表

缺乏、安全感 2021-10-14 18:15 380阅读 0赞

**一、业务场景**

客户需要在页面有一个打印按钮，点击之后可以打印Echarts图表的内容以及文字提示信息。

**二、实现原理**

1、点击打印按钮的时候，将原有的echarts图表对应的img放到新建的<div>中显示，原有的图表隐藏；

2、使用jqprint插件或者jquery.PrintArea插件打印所需要的div中的内容；

3、打印后再将新增的图片隐藏，统计图表显示。

**三、打印代码**

$("#printBtn").click(function () {
    
                    //柱状图
                    showEchartsById("img_bar_div", "picBarItem", $("#picInfo1").val());
    
                    //饼图
                    showEchartsById("img_pie_div", "picPieItem", $("#picInfo2").val());
    
                    $("#divKSZKJGDBAnalyse").printArea();
    
                    // 执行打印后再切换回来
                    // 显示echart图chart-box
                    $('#picBarItem').css('display', 'block');
                    $('#picPieItem').css('display', 'block');
                    // 隐藏图片img-box
                    $('#img_bar_div').hide();
                    $('#img_pie_div').hide();
    
    });

//打印时显示echarts图表
        function showEchartsById(imgId, divId, imgUrl){
            var imgBox = $('#' + imgId);
            var chartBox = $('#' + divId);
            if (imgBox.length <= 0) {
                chartBox.after('<div id="' + imgId + '" style="margin-top:25px;"></div>');
                imgBox = $('#' + imgId);
            }
            // 将echart生成图片并放入img-box，并显示图片img-box
            imgBox.append('<img src="' + imgUrl + '"/>').css('display', 'block');
            // 隐藏echart图chart-box
            chartBox.hide();
            // 调整img大小
            var img = imgBox.find('img');
            var imgWidth = img.width();
            var showWidth = 1000; // 显示宽度，即图片缩小到的宽度
            if (imgWidth > showWidth) { // 只有当图片大了才缩小
                var imgNewHeight = img.height() / (imgWidth / showWidth);
                img.css({ 'width': showWidth + 'px', 'height': imgNewHeight + 'px' });
            }
        }

**四、参照网址**

1、利用jqprint插件打印页面内容的实现方法：[https://www.jb51.net/article/132437.htm][https_www.jb51.net_article_132437.htm]

2、使用jquery.PrintArea实现：[https://blog.csdn.net/shunhua19881987/article/details/81221418][https_blog.csdn.net_shunhua19881987_article_details_81221418]中第二条

[https_www.jb51.net_article_132437.htm]: https://www.jb51.net/article/132437.htm
[https_blog.csdn.net_shunhua19881987_article_details_81221418]: https://blog.csdn.net/shunhua19881987/article/details/81221418