事务场景

客户要以页面有一个打印按钮,点击后方可打印Echarts图表的内容和文字提示信息,经谷歌搜索发现,实现方式大概发生三种之多,其他两栽不顶熟悉,而动的这种打印方式是一个于jQuery的大半出的一个print插件,因此可采用jQuery的不二法门查找元素,因此决定下这种方式。

预先看一下贯彻的意义图,如下:

兑现效益图

引入js文件

<script type="text/javascript" src="__JS__/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="__JS__/jqprint-0.3.js"></script>

专注这里是先行引入的jQuery文件,如果无引入第一个js文件之讲话,会并发兼容性问题,导致使用jqprint打印时报错。

html页面

这里面的html标签很多的
<div class="wrap-content container" id="container">
    <table border="0" cellpadding="0" cellspacing="0" class="store-joinin baseinfo">
        <thead>
            <tr>
                <th colspan="40">用户信息</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background: rgb(255, 255, 255);">
                <th>姓名:</th>
                <td colspan="40">18030632605</td>
            </tr>
            <tr style="background: rgb(255, 255, 255);">
                <th>性别:</th>
                <td colspan="40">男</td>
            </tr>
            <tr style="background: rgb(255, 255, 255);">
                <th>年龄:</th>
                <td colspan="40">41</td>
            </tr>
            <tr style="background: rgb(255, 255, 255);">
                <th>身份证:</th>
                <td colspan="40">52272419770101059X</td>
            </tr>
            <tr style="background: rgb(255, 255, 255);">
                <th>所属机构:</th>
                <td colspan="40">上海市政法委</td>
            </tr>
        </tbody>
      </table>
    ......
    <button class="btn btn-danger printBtn1" onclick="btnPrintClick()" type="button">打 印</button>

当然下面还有许多的html标签,在此间就是不示了。

打印按钮点击后执行之函数

function btnPrintClick(){
    var imgBox = $('#img_box');
    var chartBox = $('#main');
    if (imgBox.length <= 0) {
        chartBox.after('<div id="img_box"></div>');
        imgBox = $('#img_box');
    }

    // 将echart生成图片并放入img-box,并显示图片img-box
    imgBox.html('< img src="' + myChart.getDataURL() + '"/>').css('display','block');
    // 隐藏echart图chart-box
    chartBox.css('display','none');

    // 调整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'});
    }

    var imgBox2 = $('#img_box2');
    var chartBox2 = $('#main2');
    if (imgBox2.length <= 0) {
        chartBox2.after('<div id="img_box2"></div>');
        imgBox2 = $('#img_box2');
    }

    // 将echart生成图片并放入img-box,并显示图片img-box
    imgBox2.html('< img src="' + myChart2.getDataURL() + '"/>').css('display','block');
    // 隐藏echart图chart-box
        chartBox2.css('display','none');

    // 调整img大小
    var img2 = imgBox2.find('img');
    var img2Width = img2.width();
    var show2Width = 1000; // 显示宽度,即图片缩小到的宽度
    if (img2Width > show2Width) { // 只有当图片大了才缩小
        var img2NewHeight = img2.height() / (img2Width / show2Width);
        img2.css({'width': show2Width + 'px', 'height': img2NewHeight + 'px'});
    }

    // 打印
    $("#TestQuestions").jqprint();

    // 执行打印后再切换回来
    // 显示echart图chart-box
    chartBox.css('display','block');
    chartBox2.css('display','block');
    // 隐藏图片img-box
    imgBox.css('display','none');
    imgBox2.css('display','none');
}

注意事项:

  1. 这里用了图片的缩放比例的方式。比如Echarts图表要显的始末特别多以来,一般在html页面被使的凡于X轴上应用滚动条的法门,但是打印时得将Echarts图表先换成图jQuery,并等比例进行缩放,打印了后再也还原归即可。

  2. 其他不待打印的竹签都足以先躲。对于无欲出现于打印页面的竹签内容,我们在打印前使用jQuery查找到相应之要素,将拖欠因素隐藏起来,打印了以后,再以隐形的因素显示出即可。

相关文章

网站地图xml地图