Vue实现文件下载

最新推荐文章于 2024-07-23 16:54:53 发布

小风很努力

最新推荐文章于 2024-07-23 16:54:53 发布

阅读量1w

点赞数 6

文章标签： vue.js javascript 前端 vue

本文链接：https://blog.csdn.net/qq_54257938/article/details/121992611

版权

前端新人一枚,诸多技术还在学习,各种原理尚不了解,如有错误请大佬指正

将该方法绑定到按钮的点击事件上,即可实现文件下载

Download(){
    axios
    .post('接口',{
      //如果没有要传给后台的数据这里可以为空,但最好留着这个花括号,不然后台可能将response当做数据
        },{
        responseType:'blob',
      },{
        headers: {
              "Content-Type": "application/json;charset=UTF-8",
      },
      })
    .then((response)=>{
      console.log(response);
      //headers请求头的乱码数据转换为中文
      const fileName = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1])
      //下载文件
      let blob = new Blob([response.data], {type: "application/vnd.ms-excel"})
          let objectUrl = URL.createObjectURL(blob) // 创建URL
          const link = document.createElement('a')
          link.href = objectUrl
          // link.download = '.xlsx'// 自定义文件名
          //这里是获取后台传过来的文件名
          link.setAttribute("download",fileName)
          link.click() // 下载文件
          URL.revokeObjectURL(objectUrl) // 释放内存
    })
    .catch((error)=>{
      console.log(error);
      alert('下载失败')
    })
  },

关于文件下载还有很多方法,我所分享的只是其中一种