首页 > 代码库 > 导出网页内容

导出网页内容

2024-09-30 02:05:02   220人阅读

折腾了一天的导出报表工作，最终还是用了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="http://www.mamicode.com/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="http://www.mamicode.com/12.jpg" />
    <img src="http://www.mamicode.com/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="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/打印" 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 导出。

 

导出网页内容


联系
我们