springboot vue 下载文件，浏览器未显示下载的文件 只有控制台 Preview 有文件

Question

springboot vue 下载文件，浏览器未显示下载的文件
只有控制台 Preview 有文件

    @PostMapping("/down")
   public void down(HttpServletResponse response, @Param("id") int id) {
        Backup backup = backupService.getById(id);
          File file=new File(backup.getPath());
        response.setContentType ("application/octet-stream");
         
        String name = file.getName()+".txt";
        try {
            name = new String (name.getBytes (StandardCharsets.UTF_8), "ISO8859-1");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace ();
        }
        response.addHeader ("Content-Disposition", "attachment;filename=" + name);

        OutputStream opmt = null;

        try {
            opmt = response.getOutputStream ();
            opmt.write (FileUtils.readFileToByteArray (new File (backup.getPath())));
            opmt.close ();
        } catch (IOException e) {
            e.printStackTrace ();
        }
        
}

    async download({id}){ // id=
      const result = await getBackupDown({id}).catch(err=>{
        this.$message.error('网络请求错误')
      })
      if(result.status){
        this.$message.error('下载失败')
      }else {
        this.$message.success('下载成功')
      }

      await this.fetchData()
    },

<a-button value="small" @click="download(item)">下载</a-button>

Answer 1

this.$message.success('下载成功')
    const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
    let link = document.createElement("a");
    let href = window.URL.createObjectURL(blob); //下载链接
    link.href = href;
    link.text = "下载";
    link.download = "xxx"; //下载后文件名
    document.body.appendChild(link);
    link.click(); //点击下载
    document.body.removeChild(link); //下载完成移除元素
    window.URL.revokeObjectURL(href);  //释放blob对象

Answer 2

控制台打印那些字符,就是文件流,你需要在前端定义一个Blob对象来接收这个文件流,并将其转化一个可以下载的url地址,再使用a标签点击地址,就能触发浏览器下载事件了
代码如下

 
//在你的then函数里面写如下代码　　　　　
let fileName = "自定义文件名";//下载出来的文件名字,你可以自定义的哦
let blob = new Blob([response.data], {
   type: "application/vnd.ms-excel"
 }); //1.创建一个blob
lett aDom= document.createElement("a"); //2.创建一个a链接
aDom.download = fileName; //3.设置名称
aDom.style.display = "none"; // 4.默认不显示
aDom.href = URL.createObjectURL(blob); // 5.设置a链接href
document.body.appendChild(aDom); //6.将a链接dom插入当前html中
aDom.click(); //7.点击事件,触发下载文件
document.body.removeChild(aDom); //9.移除a链接dom

Answer 3

是你自己没处理返回的流吧😓，你需要自己构建一个a标签的dom节点然后把流绑定上去之后自己触发一个click事件模拟用户点击a标签下载，或者你直接用window.open打开下载链接浏览器就会自动处理

Answer 4

https://blog.csdn.net/qq_41582211/article/details/110955450

Answer 5

这个是第一次搞这功能都可能遇见的问题，我之前也遇到了，主要原因就是：流虽然下载到前端了，但是并没有对流进行文件保存。对应处理代码如下：

//在前台  调用导出接口的回调中写入一下代码　　　　　　
const fileName = "自定义文件名";//例如a.txt等 
 //   res.data:请求到的二进制数据
const blob = new Blob([response.data], {
   type: "application/vnd.ms-excel"
 }); //1.创建一个blob
const link = document.createElement("a"); //2.创建一个a链接
link.download = fileName; //3.设置名称
link.style.display = "none"; // 4.默认不显示
link.href = URL.createObjectURL(blob); // 5.设置a链接href
document.body.appendChild(link); //6.将a链接dom插入当前html中
link.click(); //7.点击事件
URL.revokeObjectURL(link.href); //8.释放url对象
document.body.removeChild(link); //9.移除a链接dom

Answer 6

https://blog.csdn.net/weixin_44058725/article/details/103667552

需要 一个 下载方法

Answer 7

https://blog.csdn.net/wade3po/article/details/110220315

Answer 8

你可以参考下这篇文章：Springboot+Vue实现文件下载功能