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

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

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

完整的代码（采用lodop）

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

<!-- 模态框（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>

    <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>

 

    <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>

 <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>