前端实现excel导出_<div class="exportexcel"> <a-input v-model="startt-CSDN博客

本文链接：https://blog.csdn.net/weixin_39856066/article/details/102892975

excel导出

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>excel导出</title>
</head>
<body>
<div class="exportExcel">导出</div>
<div class="excelDemo"></div>
<script>
    // excel数据处理
    function exportExcel(data,modal){
        let colSize = '150px',colHight = '30px',fontSize = '16px';
        //列标题
        let html = '';
        html += `<table style="font-size:${fontSize};">`
        html += `<tr style="text-align:center;height:30px;">`
        modal.map(item => {
            html += `<th style="background:#ccc;width:${colSize};">${item.label}</th>`
        });
        html += `</tr>`;

        //循环遍历，每行加入tr标签，每个单元格加td标签
        for(let i = 0;i<data.length;i++){
            html += `<tr style="text-align:center;height:${colHight};">`;
            modal.map(item => {
                //style="mso-number-format:'@';"  为了不让表格显示科学计数法或者其他格式
                html += `<td style="mso-number-format:'\@';">${data[i][item.key]||''}</td>`;
            })
            html += `</tr>`
        }
        html += `</table>`;

        //Worksheet名
        let worksheet = 'Sheet1';
        let uri = 'data:application/vnd.ms-excel;base64,';
        //下载的表格模板数据
        let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
            xmlns:x="urn:schemas-microsoft-com:office:excel"
            xmlns="https://www.w3.org/TR/html401/">
            <head>
            <!-- 避免中文乱码><!-->
            <meta http-equiv="Content-Type" content="text/html; 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>${html}</body></html>`;

        // 设置文件名
        let date = new Date();
        let today = `${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}${date.getHours()}${date.getMinutes()}${date.getSeconds()}`
        var a = document.createElement("a");
        a.href = uri + base64(template);
        a.download = `人员表${today}}`;
        a.click();
        document.getElementsByClassName('excelDemo')[0].innerHTML = html;
    }
    // 输出base64编码
    function base64(s){
        return window.btoa(unescape(encodeURIComponent(s)))
    }
    // 导出事件绑定
    document.getElementsByClassName('exportExcel')[0].addEventListener('click',function () {
        let tableData = [{
            name:'张三',
            sex:'男',
            tel:'908082304802',
            idCard:'666666666666666666'
        },{
            name:'李四',
            sex:'男',
            tel:'908082304802',
            idCard:'666666666666666666'
        }],dataModal = [
            {label:'姓名',key:'name'},
            {label:'性别',key:'sex'},
            {label:'联系方式',key:'tel'},
            {label:'身份证号码',key:'idCard'}
        ];
        exportExcel(tableData,dataModal);
    })
</script>
</body>
</html>


需要注意

1. 默认情况下，td的内容为较长的纯数字，会被当做数字处理显示为科学计数法形式，
   解决方法：<td style="mso-number-format:'@';">

2. 成功导出后的excel，中文部分乱码
   解决方法：在模板html头部加上
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

3. 前端实现导出对数据长度有限制：经过测试大于1536KB的数据会导出失败
   一般数据1000条左右可以满足需求