首页写一个静态的html页面请求后端接口导出excel

写一个静态的html页面请求后端接口导出excel

时间: 2024-01-30 20:03:44 浏览: 26

好的，以下是一个简单的静态 HTML 页面，通过 AJAX 请求后端接口来导出 Excel 文件： ```html <!DOCTYPE html> <html> <head> <title>导出 Excel</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <button id="export-btn">导出 Excel</button> <script> $(function() { $('#export-btn').click(function() { $.ajax({ url: '/api/export-excel', method: 'POST', xhrFields: { responseType: 'blob' }, success: function(data) { var link = document.createElement('a'); link.href = window.URL.createObjectURL(data); link.download = 'export.xlsx'; link.click(); }, error: function(xhr, status, error) { alert('导出 Excel 失败：' + error); } }); }); }); </script> </body> </html> ``` 在这个示例中，我们使用 jQuery 发送一个 POST 请求到 `/api/export-excel` 接口，同时设置 `xhrFields` 为 `{ responseType: 'blob' }`，以便在接收到二进制数据时能够正确处理。接口返回的数据会被转换成一个 Blob 对象，我们使用 `window.URL.createObjectURL()` 创建一个链接，然后将链接的 `download` 属性设置为要下载的文件名，最后模拟用户点击链接来下载 Excel 文件。需要注意的是，这只是一个简单的示例，实际情况中需要根据具体的接口协议和数据格式来进行调整。