vue springboot 文件下载

小咪咪 2023-01-17 08:55 127阅读 0赞

## 后端 ##

@RequestMapping("/apiDocs")
        public void apiDocs(String ids, HttpServletResponse response) { 
            List<Integer> collect = Arrays.stream(ids.split(",")).map(t -> Integer.valueOf(t)).collect(Collectors.toList());
    
            String docs = apiConfigService.apiDocs(collect);
    
            response.setContentType("application/x-msdownload;charset=utf-8");
            response.setHeader("Content-Disposition", "attachment; filename=接口文档.md");
            OutputStream os = null; //输出流
            try { 
                os = response.getOutputStream();
                os.write(docs.getBytes("utf-8"));
            } catch (Exception e) { 
                e.printStackTrace();
            } finally { 
                try { 
                    if (os != null)
                        os.close();
                } catch (IOException e) { 
                    e.printStackTrace();
                }
            }
        }

## 前端 ##

<el-button type="primary" @click="dialogVisible2 = false;exportDocs()">导出</el-button>

exportDocs() { 
          let a = this.$refs.tree.getCheckedKeys().filter((t) => { 
            return t != undefined
          })
          const ids = a.join(",")
          if (ids == '') { 
            return
          }
          this.axios({ 
            method: 'post',
            params: { ids: ids},
            url: '/apiConfig/apiDocs',
            responseType: 'blob' //这个很重要
          }).then((res) => { 
            console.log(res)
            const link = document.createElement('a')
            let blob = new Blob([res.data], { type: 'application/x-msdownload'});
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob);
            link.setAttribute('download', '接口文档.md')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }).catch(error => { 
            this.$message.error("导出接口文档错误")
            console.error(error)
          })
        }