很好用的把Table表格数据通过点击button导出成Excel

HTML的button按钮

点击查看代码

<button id="btn_download" type="button" class="btn btn-light" style="margin-left: 10px;" onclick="btn_export()" >
                <img src="~/download.svg" alt="Bootstrap" width="20" height="20"> 查詢匯出
            </button>

''
Table表格数据

点击查看代码

<div class="table-responsive">
            <table id="query" class="table table-sm table-bordered table-striped text-nowrap">
                <thead class="thead-light">
                    <tr>
                        <th>Form. No</th>
                        <th>提案日期</th>
                        <th>類別</th>
                        <th>提案人</th>
					</tr>
                </thead>
                <tbody>
			<tr>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>3</td>
                                    <td>4</td>
				</tr>
			</tbody>
		</table>
	</div>

js事件(这个蛮好用的,忘记前面在哪里学习的了,之前有的导出的Excel会都是字符串,不能数学计算,这个就不会)
需要添加引用,jquery.min.js 和xlsx.core.min.js

/*! xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
present SheetJS

点击查看代码

<script>
    function btn_export() {
        var table1 = document.querySelector("#query");
        var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
        openDownloadDialog(sheet2blob(sheet),'QueryData.xlsx');
    }

    // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
    function sheet2blob(sheet, sheetName) {
        sheetName = sheetName || 'sheet1';
        var workbook = {
            SheetNames: [sheetName],
            Sheets: {}
        };
        workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

        var wopts = {
            bookType: 'xlsx', // 要生成的文件类型
            bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
            type: 'binary'
        };
        var wbout = XLSX.write(workbook, wopts);
        var blob = new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
        }); // 字符串转ArrayBuffer
        function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
        return blob;
    }

    function openDownloadDialog(url, saveName) {
        if (typeof url == 'object' && url instanceof Blob) {
            url = URL.createObjectURL(url); // 创建blob地址
        }
        var aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
        var event;
        if (window.MouseEvent) event = new MouseEvent('click');
        else {
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        }
        aLink.dispatchEvent(event);
    }
</script>