master

分支 (1)

管理

管理

master

export-excel
/
test.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div xmlns="http://www.w3.org/1999/Math/MathMl">4/2</div>
</body>

</html>
<script>
    tableToExcel()
    function tableToExcel() {
        //要导出的标题
        const columns = [{
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        }, {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        }]
        //导出的数据
        const dataSource = [{
            key: '1',
            name: 'chenchen',
            age: 32,
            address: '西湖区湖底公园1号'
        }, {
            key: '2',
            name: 'fangfang',
            age: 32,
            address: '西湖区湖底公园2号'
        }, {
            key: '3',
            name: 'lanlan',
            gugug: "aaaa",
            age: 32,
            address: '西湖区湖底公园3号'
        }]

        // 处理数据
        let newDataSource = []
        for (let i = 0; i < dataSource.length; i++) {
            let tep = {};
            columns.forEach((filter) => {
                tep[filter.dataIndex] = dataSource[i][filter.dataIndex]
            })
            newDataSource.push(tep)
        }
        console.log(newDataSource)

        let str = '<tr>';
        for (let i = 0; i < columns.length; i++) {
            str += `<td>${columns[i].title + '\t'}</td>`;
        }
        str += '</tr>';
        str += '<tr>';
        for (let i = 0; i < newDataSource.length; i++) {
            for (let item in newDataSource[i]) {
                let news = newDataSource[i][item] ? newDataSource[i][item] : "";
                console.log(news)
                //style="mso-number-format:\'@\'" =>excel科学计数
                //\t制表符 tab到下一行
                str += `<td style="mso-number-format:\'@\'">${news + '\t'}</td>`;
            }
            str += '</tr>';
        }
        var linkName;
        var worksheet = linkName ? linkName : "sheet"//下载之后excel下标显示名称（linkName是自己定义的名称）
        var uri = 'data:application/vnd.ms-excel;base64,';
        var 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>${str}</table></body></html>`;
        var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
        var link = document.createElement("a");
        link.href = uri + base64(template);
        link.download = linkName ? linkName : "数据.xls";//当前下载的excel名称
        document.body.appendChild(link);
        link.innerHTML = "点击下载"
        console.log(unescape(encodeURIComponent(template)))
        // link.click();
        // document.body.removeChild(link);
    }


</script>