bootstrap模态框中含有echart图表的打印

首先模态框的弹出用js方法实现  $('#myModa1').modal('show');然后使用定时器setTimeout（function(){初始化echart图}）

完整的代码（采用lodop）

代码语言：javascript复制

<button class="btn btn-info btn-xs" type="button" id="shenhe1"><i class="fa fa-edit"></i>审核</button>

代码语言：javascript复制

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModa1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">编辑</h4>
            </div>
            <div class="modal-body">
                <div id="printArea">
                    <div class="">
                        <img id="yali-printImg1" class="yali-printImg1" style="display:none;">
                        <div id="linechart1" style="width:100%;height:200px;"></div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="margin_t20">分析报告</label>
                        <textarea class="form-control fenxibaogao" rows="3" value="123" id="fenxibaogao"></textarea>
                    </div>
                    <div class="yali-sign">审核人签名：
                        <input type="text" class="form-control input-sm " value="" id="signName" />
                    </div>
                </div>
                <div class="yali-modal-print text-center">
                    <button class="btn btn-primary margin_r20" data-dismiss="modal">确认</button>
                    <a href="javascript:prn1_preview()">
                        <button class="btn btn-primary btn-preview">打印</button>
                    </a>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
</div>

代码语言：javascript复制

    <script type="text/javascript">
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '图表标题',
        },

        tooltip: {
            trigger: 'axis', //没有此触发，则下面的样式无效
        },

        xAxis: {
            type: 'category',
            data: ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "1", "2", "3", "4", "5", "6", "7"],
        },

        yAxis: {},
        series: [{
            name: '用量统计',
            type: 'line',
            smooth: true,
            data: [11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22],
        }]

    };

    $(window).resize(function() {
        $('#tableTest1').bootstrapTable('resetView');
    });
    </script>

代码语言：javascript复制

    <script type="text/javascript">
    $(document).ready(function() {
        $("#shenhe1").click(function() {
            $('#myModa1').modal('show');
            setTimeout(function() {
                var myChart = echarts.init(document.getElementById('linechart1'), theme);
                myChart.setOption(option);
                var img1 = document.getElementById('yali-printImg1');
                img1.src = myChart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                });
                if (window.addEventListener) {
                    window.addEventListener("resize", myChart.resize, false);
                } else {
                    window.attachEvent("onresize", myChart.resize)
                }
            }, 500);

        });

    });
    </script>

代码语言：javascript复制

 <script language="javascript" type="text/javascript">
    var LODOP; //声明为全局变量 

    function prn1_preview() {
        document.getElementById("signName").setAttribute("value", document.getElementById("signName").value);
        document.getElementById("fenxibaogao").innerHTML = document.getElementById("fenxibaogao").value;
        document.getElementById("yali-printImg1").style.display = "block";
        document.getElementById("linechart1").style.display = "none";

        CreateOneFormPage();
        LODOP.PREVIEW();

    };

    function CreateOneFormPage() {
        LODOP = getLodop();
        LODOP.PRINT_INIT("打印演示1");
        var strBodyStyle = "<style>textarea { display:block;width:100%;height:80px; padding:6px 12px;} .yali-printImg1{width:100%;height:200px;} #linechart1{display:none;} .yali-sign{margin:15px 0;} .yali-sign input{width:150px;display:inline-block;}</style>";
        var strFormHtml = strBodyStyle   "<body>"   document.getElementById("printArea").innerHTML   "</body>";
        LODOP.ADD_PRINT_HTM(40, 0, "100%", "100%", strFormHtml);
    };
    </script>

(adsbygoogle = window.adsbygoogle || []).push({});

bootstrap

0 人点赞