vue导出excel文件下载

最新推荐文章于 2025-03-18 13:50:27 发布

learning_ever

最新推荐文章于 2025-03-18 13:50:27 发布

阅读量444

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/learning_ever/article/details/125536574

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了三种前端实现文件下载的方法：通过修改`window.location.href`直接下载，使用`window.open`打开新窗口下载，以及利用`a`标签创建下载链接。针对大文件，通过后端返回的文档流进行下载，并展示了请求和下载的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.通过后端接口返回url直接下载：

// 直接下载
window.location.href = url
// 通过跳转其他页面下载
window.open(url, '_blank')

2.通过创建a标签下载

let a = document.createElement('a') // 创建a标签
a.style.display = 'none'
a.setAttribute('download', '文件名') // 下载文件的名称及文件类型后缀
a.href = path // 指定下载链接
a.click() // 触发下载
a = null

3.后端返回的是文档流（文档过大可以减小请求时间）

如果是文档流的形式记得在请求的时候加上responseType: 'blob'和 getResponse: true

// 请求时
export function orderUploadExcel(params) {
  return request({
    url: '/sales/export_sales/',
    method: 'get',
    params,
    responseType: 'blob',
    getResponse: true
  })
}

// 下载
const url = window.URL.createObjectURL(
                new Blob([data], {
type:'application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet;charset=utf-8'
                  })
        )
const link = document.createElement('a')
link.href = url
const fileName = '销售订单' + getDateTime(new Date()) + '.xlsx'
link.setAttribute('download', fileName) // 下载文件的名称及文件类型后缀
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象