前台导出

纯前台导出

  <!DOCTYPE html>    
    <html>    
    <head lang="en">    
        <meta charset="UTF-8">    
        <title>html 表格导出</title>    
        <script language="JavaScript" type="text/javascript">    


            var idTmr;  
        //获取当前浏览器类型  
            function  getExplorer() {    
                var explorer = window.navigator.userAgent ;    
                //ie    
                if (explorer.indexOf("MSIE") >= 0) {    
                    return 'ie';    
                }    
                //firefox    
                else if (explorer.indexOf("Firefox") >= 0) {    
                    return 'Firefox';    
                }    
                //Chrome    
                else if(explorer.indexOf("Chrome") >= 0){    
                    return 'Chrome';    
                }    
                //Opera    
                else if(explorer.indexOf("Opera") >= 0){    
                    return 'Opera';    
                }    
                //Safari    
                else if(explorer.indexOf("Safari") >= 0){    
                    return 'Safari';    
                }    
            }    

        //获取到类型需要判断当前浏览器需要调用的方法,目前项目中火狐,谷歌,360没有问题  
            //win10自带的IE无法导出  
            function exportExcel(tableid) {    
                if(getExplorer()=='ie')    
                {    
                    var curTbl = document.getElementById(tableid);    
                    var oXL = new ActiveXObject("Excel.Application");    
                    var oWB = oXL.Workbooks.Add();    
                    var xlsheet = oWB.Worksheets(1);    
                    var sel = document.body.createTextRange();    
                    sel.moveToElementText(curTbl);    
                    sel.select();    
                    sel.execCommand("Copy");    
                    xlsheet.Paste();    
                    oXL.Visible = true;    

                    try {    
                        var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");    
                    } catch (e) {    
                        print("Nested catch caught " + e);    
                    } finally {    
                        oWB.SaveAs(fname);    
                        oWB.Close(savechanges = false);    
                        oXL.Quit();    
                        oXL = null;    
                        idTmr = window.setInterval("Cleanup();", 1);    
                    }    

                }    
                else    
                {    
                    tableToExcel(tableid)    
                }    
            }    
            function Cleanup() {    
                window.clearInterval(idTmr);    
                CollectGarbage();    
            }   

        //判断浏览器后调用的方法,把table的id传入即可  
            var tableToExcel = (function() {    
                var uri = 'data:application/vnd.ms-excel;base64,',    
                        template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',    
                        base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },    
                        format = function(s, c) {    
                            return s.replace(/{(\w+)}/g,    
                                    function(m, p) { return c[p]; }) }    
                return function(table, name) {    
                    if (!table.nodeType) table = document.getElementById(table)    
                    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}    
                    window.location.href = uri + base64(format(template, ctx))    
                }    
            })()    

        </script>    
    </head>    
    <body>   

    <div >    

        <button type="button" onclick="exportExcel('tableExcel')">导出Excel</button>    
    </div>    
    <div id="myDiv">    
    <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">    
        <tr>    
            <td colspan="5" align="center">html 表格导出道Excel</td>    
        </tr>    
        <tr>    

            <td>列标题</td>    
        </tr>    
        <tr>    
            <td>aaa</td>    
            <td>bbb</td>    
            <td>ccc</td>    
            <td>ddd</td>    
            <td>eee</td>    
        </tr>    
        <tr>    
            <td>AAA</td>    
            <td>BBB</td>    
            <td>CCC</td>    
            <td>DDD</td>    
            <td>EEE</td>    
        </tr>    
        <tr>    
            <td>FFF</td>    
            <td>GGG</td>    
            <td>HHH</td>    
            <td>III</td>    
            <td>JJJ</td>    
        </tr>    
    </table>    
    </div>    
    </body>    
    </html>    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在前台下载导出的Excel文件,你可以按照以下步骤进行操作: 1. 在后端生成Excel文件:使用POI库来创建Excel文件并填充数据。你可以使用Java中的POI库,如Apache POI,来实现这一步骤。根据你的需求,可以创建一个XLS或XLSX格式的Excel文件。 2. 将生成的Excel文件保存到服务器:一旦Excel文件生成完成,将其保存到服务器的指定路径上。确保你有权限将文件保存到该位置。 3. 创建一个下载链接或按钮:在前台创建一个下载链接或按钮,让用户能够点击并下载Excel文件。你可以使用HTML和JavaScript来实现这个功能。 4. 处理下载请求:当用户点击下载链接或按钮时,前端会发送一个下载请求到后端。后端需要根据请求处理来返回Excel文件给用户。 5. 设置响应头部信息:在后端处理下载请求时,需要设置正确的响应头部信息,以便浏览器能够正确地识别并处理Excel文件。设置Content-Disposition头部信息为"attachment; filename=yourFileName.xls"或"attachment; filename=yourFileName.xlsx",取决于你生成的Excel文件格式。 6. 将Excel文件内容写入响应流:将生成的Excel文件内容写入响应流,并将其发送给前端。确保设置正确的Content-Type头部信息,如"application/vnd.ms-excel"或"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"。 7. 完成下载:浏览器会接收到Excel文件的响应流,并开始下载文件。用户可以选择保存或打开该文件。 这样,你就可以通过前台下载来导出使用POI库生成的Excel文件了。记得根据你的具体需求进行适当的调整和修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值