数据+数据图打印

<p>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
</p>
<p>人员表+饼状图打印（1.不能用table布局，2.浏览器不同会导致显示页面不同）</p>
<style><!--@page {size: auto;  margin: 0mm; }
        a {
            text-decoration: none;
            color: #333;
        }

        .show {
            width: 50%;
            margin-left: 25%;
            border: 1px solid #696;
            text-align: center;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            -webkit-box-shadow: #666 0px 0px 10px;
            -moz-box-shadow: #666 0px 0px 10px;
            box-shadow: #666 0px 0px 10px;
        }

        .daochushow, .daohanghide {
            list-style-type: none;
            height: auto;
            width: 90%;
            margin-left: 2%;
            text-align: center;
        }

        li {
            min-height: 30px;
            line-height: 30px;
            height: auto;
        }

        .daochushow .daochu1 {
            height: 45px;
            width: 100%;
            font-size: 30px;
            font-weight: 700;
             margin-top:30px;
        }

            .daochushow .daochu1 img {
                width: 100%;
                height: 100%;
            }

        .daohanghide .daochu2 {
            font-size: 18px;
            text-align: left;
        }

        .daochushow .daochu2 {
            font-size: 20px;
            text-align: left;
        }

        .daochushow .daochu3 {
            width: 100%;
            height: auto;
        }

            .daochushow .daochu3 div {
                float: left;
                border-bottom: 1px solid #808080;
                font-size: 16px;
            }

        .divtitle {
            font-size: 18px;
            font-weight: 700;
            margin-top: 20px;
        }

        .daochushow .daochu4 {
            width: 100%;
            height: auto;
            margin-top:50px;
            margin-bottom:50px;
        }

       .daochushow .daochu4 #Div3 {
            width: 100%;
            height: 400px;
        }

        .daochushow .bottom {
            font-size: 20px;
            text-align: right;
            margin-top: 5px;
        }
        .heightzuoxiajiao {
       height: 300px;
        }
                    .fenye {
            page-break-after:always
            }
        .titleimg {
        display:none;
        }
        @media print {
        .daochushow, .daohanghide {
            list-style-type: none;
            height: auto;
            width: 90%;
            margin-left: 2%;
            text-align: center;
        }

        li {
            min-height: 30px;
            line-height: 30px;
            height: auto;
        }

        .daochushow .daochu1 {
            height: 45px;
            width: 100%;
            font-size: 30px;
            font-weight: 700;
            margin-top:30px;
        }

            .daochushow .daochu1 img {
                width: 100%;
                height: 100%;
            }

        .daohanghide .daochu2 {
            font-size: 18px;
            text-align: left;
        }

        .daochushow .daochu2 {
            font-size: 20px;
            text-align: left;
        }

        .daochushow .daochu3 {
            width: 100%;
            height: auto;
        }

            .daochushow .daochu3 div {
                float: left;
                border-bottom: 1px solid #808080;
                font-size: 16px;
            }

        .divtitle {
            font-size: 18px;
            font-weight: 700;
            margin-top: 20px;
        }

        .daochushow .daochu4 {
            width: 100%;
            height: auto;
            margin-top:50px;
            margin-bottom:50px;
        }

       .daochushow .daochu4 #Div3 {
            width: 100%;
            height: 400px;
        }

        .daochushow .bottom {
            font-size: 20px;
            text-align: right;
            margin-top: 5px;
        }
         .heightzuoxiajiao {
       height: 300px;
        }
            .fenye {
            page-break-after:always
            }
                   .titleimg {
        display:block;
        }
        }
    
--></style>
<form id="form1">
<div class="show">
<ul class="daohanghide">
<li class="daochu2">
<a style="margin-left: 50px;" onclick="javascript:history.go(-1);" href="javascript:;"><span style="font-size: 20px;">↩</span>&nbsp;返回</a> 
<a style="margin-left: 50px;" onclick="DaYin();" href="javascript:;"><span style="font-size: 20px;">㊞</span>&nbsp;导出&amp;打印</a>
</li>
</ul>
<!--startprint-->
<ul class="daochushow">
<li class="daochu1"><img src="image/bg.png" alt="" /></li>
<li class="daochu1">****报告</li>
<li class="daochu2">
<input class="text1" style="border-bottom: 1px solid #000; border-left: none; border-right: none; border-top: none; background-color: transparent; height: 35px; width: 180px;" type="text" /> 单位：</li>
<li class="daochu2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 你单位于 参加测试，本次测试10题，体检成绩如下：</li>
<li class="daochu3">
<div class="divtitle" style="width: 10%;">序号</div>
<div class="divtitle" style="width: 20%;">编号</div>
<div class="divtitle" style="width: 15%;">姓名</div>
<div class="divtitle" style="width: 25%;">身份证号</div>
<div class="divtitle" style="width: 15%;">分数</div>
<div class="divtitle" style="width: 15%;">评价</div>
</li>
<li class="daochu3">
<div class="num" style="width: 10%;">1</div>
<div style="width: 20%;">201919191</div>
<div style="width: 15%;">张三</div>
<div style="width: 25%;">3735353535554454</div>
<div style="width: 15%;">100分</div>
<div style="width: 15%;">优秀</div>
</li>
<li class="fenye"></li>
<li class="daochu1 titleimg"><img src="image/bg.png" alt="" /></li>
<li class="daochu4"><!--饼状图-->
<div id="Div3">&nbsp;</div>
<!--/饼状图--></li>
<li class="daochu2">&nbsp;&nbsp;&nbsp;&nbsp;说明：本次测试共有人参加， 其中 平均成绩， 成绩，。</li>
<li class="heightzuoxiajiao"></li>
<li class="bottom">指导员：<input class="text1" style="border: none; height: 35px;" type="text" /></li>
<li class="bottom"></li>
</ul>
<!--endprint--></div>
</form>
<p>
<script type="text/javascript">// <![CDATA[
    function DaYin() {        
        bdhtml = window.document.body.innerHTML;
        sprnstr = "<!--startprint-->";
        eprnstr = "<!--endprint-->";
        prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
        prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
        window.document.body.innerHTML = "<html><head></head><body>" + prnhtml + "</body></html>";
        window.print();
        $(".daochushow").css("width","50%");
    }
    var nn = 1;
    $(".num").each(function () {
        $(this).text(nn);
        nn++;
    });
    /*---------饼状图----------------*/
    var browsers = [];
    var zongnum = $("#number").val();
    var numstr = $("#num").val();
    var fenxi = "";
    var arr = new Array();
    arr = numstr.split('&');
    for (var i = 0; i < arr.length; i++) {
        var arrs = new Array();
        arrs = arr[i].split(',');
        browsers.push({ "name": arrs[0], "y": parseFloat(arrs[2]), "nums": parseInt(arrs[1]) });
        fenxi += "成绩" + arrs[0] + arrs[1] + "人，占比" + parseFloat(arrs[2]) + "%；";
    }
    $("#FenXi").text(fenxi);

    //饼状图 (比例)
    var chart = {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    };
    var title = {
        text: '分析 (共' + zongnum + '人)',
        style: {
            color: '#000',
            fontSize: '18px',
            fontWeight: '700',
        }
    };
    var tooltip = {
        pointFormat: '<b>{point.y:.1f}%</b>'
    };
    var plotOptions = {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name} ({point.nums}人)</b>: {point.y:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    };
    var series = [{
        type: 'pie',
        data: browsers
    }];
    var json = {};
    json.chart = chart;
    json.title = title;
    json.tooltip = tooltip;
    json.series = series;
    json.plotOptions = plotOptions;
    json.credits = { enabled: false };
    json.colors = ['red', 'orange', 'yellow', 'green',
'cyan', 'blue', '', 'purple', '#6AF9C4'];
    json.chart = {
        style: {
            fontFamily: 'Microsoft YaHei'
        },
    }

    $('#Div3').highcharts(json);
    /*---------饼状图----------------*/
// ]]></script>
</p>

 

转载于:https://www.cnblogs.com/nbsp12138/p/11112262.html