前端如何拿到后端传来的xlsx,并实现下载功能
时间: 2024-02-27 11:56:25 浏览: 235
xlsx-js-style导出Demo,纯前端带样式导出表格数据
5星 · 资源好评率100%
前端一般可以使用 AJAX 或者 Fetch API 从后端获取 Excel 文件,并使用 Blob 对象实现下载功能。具体实现步骤如下:
1. 使用 AJAX 或者 Fetch API 向后端发送请求,获取 Excel 文件的二进制数据。
2. 将二进制数据转换为 Blob 对象。
3. 创建一个下载链接,并将 Blob 对象赋值给链接的 href 属性。
4. 设置链接的 download 属性为文件名,以便浏览器可以下载并保存文件。
5. 在页面上触发链接的点击事件,即可实现下载功能。
示例代码如下:
```javascript
// 使用 Fetch API 获取 Excel 文件
fetch('/download_excel')
.then(response => response.blob())
.then(blob => {
// 创建下载链接
const a = document.createElement('a')
const url = window.URL.createObjectURL(blob)
a.href = url
// 设置下载属性
a.download = 'excel.xlsx'
// 触发点击事件
a.click()
// 释放 Blob 对象 URL
window.URL.revokeObjectURL(url)
})
```
在上面的代码中,`fetch` 函数用于获取 Excel 文件,`blob` 方法将响应转换为 Blob 对象。然后,我们创建了一个下载链接,并将 Blob 对象 URL 赋值给链接的 href 属性。最后,我们设置下载属性并触发点击事件,即可实现下载功能。
阅读全文