折腾了一天的导出报表工作，最终还是用了jspdf插件，路程虽为坎坷，但是学习了不少。
首先，页面中有表格，有echart图表，初步尝试jspdf 导出会有部分缺失，失败了。考虑用
window.print(),虽然原始，但是很好用。
优点：1、有滚动条，滚动条以下内容也可打印。
2、打印出来排版正常，样式不会丢失。
缺点：eachart 图表，没能被打印。（样例代码如下）
<html>
<head>
<title>div print</title>
</head>
<body>
<input name="b_print" type="button" class="ipt" onClick="printdiv(‘div_print‘);" value=" Print ">
<div id="div_print" style="height: 200px;overflow:auto; ">
<div style="height: 500px;">
<h1 style="Color:Red">The Div content which you want to print</h1>
<img src="12.jpg" />
<img src="12.jpg" />
</div>
</div>
</body>
<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
</html>
解决echart图表未被打印问题，也就是在打印之前将echart图表，转换为图片，还好echart有接口可以实现。
define(function(require,exports,module){
function printReport(param){
var $imgBox = $("#img-box_"+param.chartBox);
var $chartBox = $("#"+param.chartBox);
if ($imgBox.length <= 0) {
$chartBox.after(‘<div id="img-box_‘+param.chartBox+‘"></div>‘);
$imgBox = $("#img-box_"+param.chartBox);
}
// 将echart生成图片并放入img-box，并显示图片img-box
var mychart=param.chartObj;
$imgBox.html(‘<img src="‘ + mychart.getDataurl() + ‘"/>‘).css(‘display‘,‘block‘);
// 隐藏echart图chart-box
$chartBox.css(‘display‘,‘none‘);
// 调整img大小
var $img = $imgBox.find(‘img‘);
var imgWidth = $img.width();
var showWidth = "500"; // 显示宽度，即图片缩小到的宽度
if (imgWidth > showWidth) { // 只有当图片大了才缩小
var imgNewHeight = $img.height() / (imgWidth / showWidth);
$img.css({‘width‘: showWidth + ‘px‘, ‘height‘: imgNewHeight + ‘px‘});
}
}
exports.printReport = printReport;
});
/**调用时传参数，echart对象，echart初始化的div的id */
var param={
chartObj:echart,
chartBox:"myechartId"
}
非常完美的将图表转换为了图片！然后打印，OK！可以问题又来了，为毛它打印出来，说什么就是不分页了呢？只要超出一页部分就不可以打印了。呜呜。。。。
继续解决不分页的问题：
<html>
<head>
<title>无标题文档</title>
<script language="javascript">
//打印代码
function Print()
{
var printStr ="<html><head><title></title></head><body>";
var content = "";
var str = document.getElementById(‘page1‘).innerHTML; //获取需要打印的页面元素 ，page1元素设置样式page-break-after:always，意思是从下一行开始分割。
content = content + str;
str = document.getElementById(‘page2‘).innerHTML; //获取需要打印的页面元素
content = content + str;
printStr = printStr+content+"</body></html>";
var pwin=window.open("Print.htm","print"); //如果是本地测试，需要先新建Print.htm，如果是在域中使用，则不需要
pwin.document.write(printStr);
pwin.document.close(); //这句很重要，没有就无法实现
pwin.print();
}
</script>
</head>
<body >
<div><input type="button" value="打印" onclick="Print()" /></div>
<div id="page1">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" >
<tr><td>第一页打印内容</td></tr>
</table>
</div>
<div id="page2">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="content" >
<tr><td>第二页打印内容</td></tr>
</table>
</div>
</body>
</html>
完美的分页了。然而，兴高采烈的用到项目中。。。。。。尼玛! 我的表格样式怎么没有了！！！
好吧，若页面图表打印，无复杂样式打印，window.print() 还是个不错的选择，然而，需求是导出报表，好像不太一样啊！
下篇继续研究jspdf 导出。
时间： 2024-11-06 07:31:01