导出网页内容
Posted 你好,年轻人......
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导出网页内容相关的知识，希望对你有一定的参考价值。
折腾了一天的导出报表工作，最终还是用了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 导出。
以上是关于导出网页内容的主要内容，如果未能解决你的问题，请参考以下文章
.net中如何将网页中的数据导出成dbf(access)文件
ATP应用测试平台——关于网页表格的打印及PDF下载的实战案例
[搬运] 将 Visual Studio 的代码片段导出到 VS Code