本人不懂代码,之前公司请人做了个后台,能够根据后台录入的数据自动生成一系列表格,然后再将表格截图粘贴到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">×</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>
.....
高手们能否帮忙改造一下,在此先谢谢了
在只包含一个表格的页面加入成功,能实现点击按钮弹出该表格的截图完成窗口,代码如下所示:......
<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">×</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>
.....
高手们能否帮忙改造一下,在此先谢谢了
“实现点击任意一个表格的任意一处,就可以弹出该已完成的截图图片窗口”这个估计改动麻烦些,可以不弄,其实我就是想把以下这些代码整合到问题第二段代码的js里,最终实现生成的每个表格旁边(不在表格内)都有对应的一个按钮,点击就能弹出截图效果<button id="btnsave" class="btn btn-success" data-toggle="modal" data-target="#myModal">↓点此截图</button><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>