jizhanqingfeng 2018-10-01 02:10
浏览 323

小白求助:表格由js生成,如何向其增加额外内容?

本人不懂代码,之前公司请人做了个后台,能够根据后台录入的数据自动生成一系列表格,然后再将表格截图粘贴到PPT,效率很低,最近看到网上有基于html2canvas实现网页保存为图片的功能,想试着改造一下:
在只包含一个表格的页面加入成功,能实现点击按钮弹出该表格的截图完成窗口,代码如下所示:

 ......
 <script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
 ......
 <style>
 .capture{width: 960px;height: 720px;margin-bottom: 10px;}
 .btn-success {margin-bottom: 10px;}
 </style>
 <button id="btnsave" class="btn btn-success" data-toggle="modal" data-target="#myModal">↓点此截图</button>

 <div class="tab-content capture">
    <table class="table table-bordered class-table ppt">
        <thead>
            <tr>
                <th colspan="8" >表格</th>
            </tr>
            <tr>
                <th></th>
                <th>排名</th>
                <th>第一课<br>积分</th>
                <th>第二课<br>积分</th>
                <th>第三课<br>积分</th>
                <th>第四五一课<br>积分</th>
                <th>总积分</th>
            </tr>
        </thead>
        <tbody>
            <foreach name="students" item="v">
                <tr>
                    <td>{$v.studentname}</td>
                    <td>{:getRankNew($all_students,$v['score'],$v['oldscore'])}</td>
                    <td class="red_0_{$v['id']}">{:cateScore(0,$test_his_info,$v['id'],$all_cate,$all_test)}</td>
                    <td class="red_1_{$v['id']}">{:cateScore(1,$test_his_info,$v['id'],$all_cate,$all_test)}</td>
                    <td class="red_2_{$v['id']}">{:cateScore(2,$test_his_info,$v['id'],$all_cate,$all_test)}</td>
                    <td class="red_3_{$v['id']}">{:cateScore(3,$test_his_info,$v['id'],$all_cate,$all_test)}</td>
                    <td class="red_4_{$v['id']}">{:cateScore(4,$test_his_info,$v['id'],$all_cate,$all_test)}</td>
                    <td><span>{:riseScore3($v['score'],$v['oldscore'])}</span></td>
                </tr>
            </foreach>
        </tbody>
    </table>
</div>


 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">已生成图片,可直接复制粘贴到WPS,若使用2003版ppt,需先将图片保存到电脑再复制粘贴</h4>
      </div>
      <div class="modal-body" id="modal-img" style="text-align: center;">

      </div>
    </div>
  </div>
</div>
<script>
$('#btnsave').on('click',  function(event) {
    event.preventDefault();
    $('#modal-img').html('');
    html2canvas(document.querySelector(".capture")).then(canvas => {
        //document.body.appendChild(canvas)
        $('#modal-img').append(canvas);

    });
});
</script>

但是在包含由js生成的多个表格页面,本人不知道该如何改造,如何把相关代码加进去,从而实现点击任意一个表格的任意一处,就可以弹出已完成的截图图片窗口,待改造的代码如下:

 .....
<div id="wrapper">
    <include file="inc/nav"/>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">{$banj_info.banjname}本周报表</h1>
            </div>
        </div>
        <div class="row">
            <include file="inc/chartnav"/>
            <br>
            <div class="tab-content">
                <div style="min-width:600px;">
                    <div>
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist" id="myTabs2">
                            <foreach name="level_cate" item="v">
                                <li role="presentation" data-id="{$v.id}">
                                    <a href="#{$v.id}" target="_self">
                                        {$v.catename}
                                    </a>
                                </li>
                            </foreach>
                        </ul>
                        <br>
                        <!-- Tab panes -->
                        <div class="tab-content" id="res_content">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#myTabs li').eq(3).addClass('active');
    var loadArr = [];
    var bid = {$bid};
    var cid = location.hash.split('#')[1];
    if( !cid ){
        cid = $('#myTabs2 li').eq(0).attr('data-id');
    }  
    $('#myTabs2 li').click(function(){
        $('#myTabs2 li').removeClass('active');
        var _t = $(this);
        _t.addClass('active');
        var _cid = parseInt( _t.attr('data-id') );
        var _bid = {$bid};
        loadData( _cid,_bid);
    });
    function loadData(cid,bid){
        var res_content = $('#res_content');
        res_content.html('<img src="http://ww1.sinaimg.cn/large/acf60cddgy1fimgvhxrl3g203k00ft8i.gif" /><br>加载数据中,请稍后……');
        $.ajax({
            method:'POST',
            data:{
                bid:bid,
                cid:cid
            },
            url:'{:U("Chart/chart4handle")}',
            success:function(res){
                if( res.code == 200 ){
                    res_content.html(res.html);
                    bindScrollFunc();
                }
            }
        })
    }
    function getData(cid,id){
        var res_content = $('#'+id);
        var bid = {$bid};
        res_content.html('<img src="http://ww1.sinaimg.cn/large/acf60cddgy1fimgvhxrl3g203k00ft8i.gif" /><br>加载数据中,请稍后……');
        $.ajax({
            method:'POST',
            data:{
                bid:bid,
                cid:cid
            },
            url:'{:U("Chart/chart4handle2")}',
            success:function(res){
                if( res.code == 200 ){
                    res_content.html(res.html);
                }
            }
        })
    }
    loadData(cid,bid);
    $('#myTabs2 li').removeClass('active');
    $('#myTabs2 li[data-id='+cid+']').addClass('active');
    function bindScrollFunc(){
        loadArr = [];
        $(window).scroll(function(){
            var _t = $(window).scrollTop();
            $('#res_content .ppt').each(function(){
                var _th = $(this);
                var _top = _th.offset().top;
                var _id = _th.attr('data-res');
                var _cid = _th.attr('data-id');
                //console.log( _cid );
                //console.log( loadArr );
                //console.log( $.inArray(_cid,loadArr) );
                if( _t+400 > _top && -1 == $.inArray(_cid,loadArr) ){
                    getData(_cid,_id);
                    loadArr.push(_cid);
                }
            });
        });
    }
</script>
.....

高手们能否帮忙改造一下,在此先谢谢了

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥20 thinkphp适配人大金仓问题
    • ¥15 有卷积神经网络识别害虫的项目吗
    • ¥15 数据库数据成问号了,前台查询正常,数据库查询是?号
    • ¥15 算法使用了tf-idf,用手肘图确定k值确定不了,第四轮廓系数又太小才有0.006088746097507285,如何解决?(相关搜索:数据处理)
    • ¥15 彩灯控制电路,会的加我QQ1482956179
    • ¥200 相机拍直接转存到电脑上 立拍立穿无线局域网传
    • ¥15 (关键词-电路设计)
    • ¥15 如何解决MIPS计算是否溢出
    • ¥15 vue中我代理了iframe,iframe却走的是路由,没有显示该显示的网站,这个该如何处理
    • ¥15 操作系统相关算法中while();的含义