導出網頁內容
阿新 • • 發佈：2017-06-03
報表 nts rtb false bsp 標題 fin def div
折騰了一天的導出報表工作，最終還是用了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 導出。
導出網頁內容