VuePost请求下载文件

最新推荐文章于 2024-05-14 14:06:32 发布

zonhar

最新推荐文章于 2024-05-14 14:06:32 发布

阅读量741

点赞数 2

分类专栏： vue 前端文章标签： javascript vue.js node.js es6

本文链接：https://blog.csdn.net/weixin_40049583/article/details/116194417

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue中通过POST请求下载文件。利用`request.js`模块，发送带有参数的POST请求到服务器，然后将返回的Blob对象转换为下载链接，设置文件名并触发浏览器下载。关键步骤包括创建隐藏的`<a>`标签，设置响应类型为`blob`，以及使用`URL.createObjectURL`创建下载链接。

摘要由CSDN通过智能技术生成

Vue下载文件

- Post请求下载

Post请求下载

request.js

export function exportExcel(params) {
  return request({
    url: '/report/access/exportExcel',
    method: 'post',
    responseType: 'blob',
    data: params
  })
}

exportExcel(this.queryObject).then(res => {
        const link = document.createElement('a') // 创建元素
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob) // 创建下载的链接
        link.setAttribute('download', 'xx.xlsx') // 给下载后的文件命名
        document.body.appendChild(link)
        link.click() // 点击下载
        document.body.removeChild(link) //  下载完成移除元素
        window.URL.revokeObjectURL(link.href) // 释放掉blob对象
      })