前端开发JS生成XLS文件并导出

前端开发和后端开发哪个难学
前端开发去哪个公司好
前端开发dba哪个好

今天给大家带来的是一个小玩意;
js生成XLS文件,并自动下载

测试环境是MAC chrome ,其他浏览器没测试 ,IE有更好的办法解决

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>js导出XLS</title>
    </head>
    <body>
        <button id=”button”>生成并导出XLS文件</button>
        <script>
            function createXlsFile(jsonData) {
                var table = ‘<table>’
                //生成表头
                var row = ‘<tr>’
                for (var i = 0; i < jsonData.th.length; i++) {
                    row += ‘<th>’ + jsonData.th[i] + ‘</th>’
                }
                table += row + ‘</tr>’
                var tds = jsonData.tds
                for (var i = 0, len = tds.length; i < len; i++) {
                    var td = ‘<tr>’
                    for (var j = 0, jLen = tds[i].length; j < jLen; j++) {
                        td += ‘<td>’ + tds[i][j] + ‘</td>’
                    }
                    td += ‘</tr>’
                    table += td
                }
                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 += ‘sheet’
                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 += table
                excelFile += ‘</body>’
                excelFile += ‘</html>’
                var uri =
                    ‘data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8,base64,’ +
                    encodeURIComponent(excelFile)
                var link = document.createElement(‘a’)
                link.href = uri
                link.style = ‘visibility:hidden’
                link.download = jsonData.fileName + ‘.xls’
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            }
            document.getElementById(‘button’).onclick = function() {
                createXlsFile({
                    fileName: ‘test’,
                    th: [‘年龄’, ‘姓名’, ‘身高’],
                    tds: [[10, ‘张三’, 110], [20, ‘李四’, 120]],
                })
            }
        </script>
    </body>
</html>
前端开发 后端开发 哪个好
前端开发是哪个专业
前端开发和后端开发哪个难
» 本文来自:前端开发者 » 《前端开发JS生成XLS文件并导出》
» 本文链接地址:https://www.rokub.com/8202.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!