前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >bootstrap模态框中含有echart图表的打印

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

作者头像
tianyawhl
发布2019-04-04 16:36:37
1.6K0
发布2019-04-04 16:36:37
举报
文章被收录于专栏:前端之攻略前端之攻略

首先模态框的弹出用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({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016/07/27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档