您的位置:首页 > Web前端 > JavaScript

纯前台js json导出到excel,不与后台交互

2017-07-06 14:47 330 查看
<html>  

<head>  

    <meta http-equiv="content-type" content="text/html; charset=utf-8">  

    <script type="text/javascript" src="jquery.min.js"></script>  

    <script type="text/javascript">  

        $(document).ready(function(){  

            $('#wwo').click(function(){  

                var data = {"title":[{"value":"集团", "type":"ROW_HEADER_HEADER", "datatype":"string"}, {"value":"日期", "type":"ROW_HEADER_HEADER", "datatype":"string"}],"data":[[{"value":"好好", "type":"ROW_HEADER"}, {"value":"2015-08-24", "type":"ROW_HEADER"}]]};  

                if(data == '')  

                    return;  

                JSONToExcelConvertor(data.data, "Report", data.title);  

            });  

        });  

  

        function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {  

            //先转化json  

            var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;  

              

            var excel = '<table>';      

              

            //设置表头  

            var row = "<tr>";  

            for (var i = 0, l = ShowLabel.length; i < l; i++) {  

                row += "<td>" + ShowLabel[i].value + '</td>';  

            }  

              

              

            //换行  

            excel += row + "</tr>";  

              

            //设置数据  

            for (var i = 0; i < arrData.length; i++) {  

                var row = "<tr>";  

                  

                for (var index in arrData[i]) {  

                    var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;  

                    row += '<td>' + value + '</td>';  

                }  

                  

                excel += row + "</tr>";  

            }  

  

            excel += "</table>";  

  

            var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";  

            excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';  

            excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';  

            excelFile += '; charset=UTF-8">';  

            excelFile += "<head>";  

            excelFile += "<!--[if gte mso 9]>";  

            excelFile += "<xml>";  

            excelFile += "<x:ExcelWorkbook>";  

            excelFile += "<x:ExcelWorksheets>";  

            excelFile += "<x:ExcelWorksheet>";  

            excelFile += "<x:Name>";  

            excelFile += "{worksheet}";  

            excelFile += "</x:Name>";  

            excelFile += "<x:WorksheetOptions>";  

            excelFile += "<x:DisplayGridlines/>";  

            excelFile += "</x:WorksheetOptions>";  

            excelFile += "</x:ExcelWorksheet>";  

            excelFile += "</x:ExcelWorksheets>";  

            excelFile += "</x:ExcelWorkbook>";  

            excelFile += "</xml>";  

            excelFile += "<![endif]-->";  

            excelFile += "</head>";  

            excelFile += "<body>";  

            excelFile += excel;  

            excelFile += "</body>";  

            excelFile += "</html>";  

  

              

            var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);  

              

            var link = document.createElement("a");      

            link.href = uri;  

              

            link.style = "visibility:hidden";  

            link.download = FileName + ".xls";  

              

            document.body.appendChild(link);  

            link.click();  

            document.body.removeChild(link);  

        }  

    </script>  

</head>  

<body>  

    <input type="button" id="wwo" value="导出" />  

</body>  

</html>  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: