js 表格或者json数据导出excel

表格导出excel

如果在主流浏览器上,不考虑ie,可以这么写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <table border="1" cellspacing=" 0" id="tableExcel" width="100%" class="table table-hover">
        <tr>
            <td colspan="5" align="center">html 表格导出Excel</td>
        </tr>
        <tr>
            <td>列标题1</td>
            <td>列标题2</td>
            <td>类标题3</td>
            <td>列标题4</td>
            <td>列标题5</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>
    <a id="dlink" style="display:none;"></a>
    <input type="text" name="" value="请输入文件名" class="center-block form-control"
        style="margin-bottom: 20px; text-align: center" id="submit" onclick="submt()">
    <input type="button" class="btn btn-primary center-block"
        onclick="tableToExcel('tablename', 'name', 'zhangsan.xls')" value="导出">
</body>
<script>
    function submt() {
     
     
        document.getElementById('submit').value = "";
    }

    var tableToExcel = (function () {
     
     
        var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<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"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></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("tableExcel")
            var ctx = {
     
      worksheet: name || 'Worksheet', table: table.innerHTML }
            document.getElementById("dlink").href = uri + base64(format(template, ctx));
            document.getElementById("dlink").download = document.getElementById('submit').value + '.xls';
            document.getElementById("dlink").click();
        }
    })();
</script>

</html>

如果要兼容ie浏览器

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';
    }
}
function method5(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();
}
var tableToExcel = (function () {
    
    
    var uri = 'data:application/vnd.ms-excel;base64,',
        template = '<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"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></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));
    }
})();
method5(table);  //table是表格的id

JSON数据导出excel

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
</body>
<script>
    function tableToExcel() {
     
     
        //要导出的json数据
        const jsonData = [
            {
     
     
                name: '张先生',
                phone: '123456789',
                email: '[email protected]'
            },
            {
     
     
                name: '王先生',
                phone: '123456789',
                email: '[email protected]'
            },
            {
     
     
                name: '李先生',
                phone: '123456789',
                email: '[email protected]'
            },
            {
     
     
                name: '赵先生',
                phone: '123456789',
                email: '[email protected]'
            },
        ]
        //列标题,逗号隔开,每一个逗号就是隔开一个单元格
        let str = `姓名,电话,邮箱\n`;
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (let i = 0; i < jsonData.length; i++) {
     
     
            for (let item in jsonData[i]) {
     
     
                str += `${
       
       jsonData[i][item] + '\t'},`;
            }
            str += '\n';
        }
        //encodeURIComponent解决中文乱码
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        let link = document.createElement("a");
        link.href = uri;
        link.innerHTML = 'json数据表.csv下载';
        //对下载的文件命名
        link.download = "json数据表.csv";
        document.body.appendChild(link);
    }
    tableToExcel();
</script>

</html>

猜你喜欢

转载自blog.csdn.net/document_dom/article/details/90486939