需求解析

此需求开始的时候最大的误区是,因为后端生成byte数组比较容易,因此总想在后端将其转为Blob发送,过程中遇到很多问题。
后来发现,直接发送字节流即可,前端将其转化为Blob很容易。

下载接口编写

getFile(path) {
      let formData = new FormData();
      formData.append('path', path); // 用于后端下载文件的路径
      this.$axios
        .post('http://localhost:8090/warheadModel/getFile', formData, {
          responseType: 'blob'
        })
        .then(response => {
          if (response.status == 200){
            console.log(response)
            let url = window.URL.createObjectURL(new Blob([response.data])) // 将获取的文件转化为blob格式
            let a = document.createElement('a'); // 此处向下是打开一个储存位置
            a.style.display = 'none';
            a.href = url;
            // 下面两行是自己项目需要的处理,总之就是得到下载的文件名(加后缀)即可
            var fileNameArray = path.split('#')[1].split('/')
            var fileName = fileNameArray[fileNameArray.length-1]
            
            a.setAttribute('download',fileName);
            document.body.appendChild(a);
            a.click();//点击下载
            document.body.removeChild(a);// 下载完成移除元素
            window.URL.revokeObjectURL(url);// 释放掉blob对象
            this.$message.success("文件下载成功") //删除弹窗
          }
          else {
            this.$message.error("文件下载失败")
          }
        })
    }
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐