【1·笔记】Java+Vue 从浏览器下载来自服务端的文件

【1·笔记】Java+Vue 从浏览器下载来自服务端的文件

问题背景

如图所示，浏览器和系统A属于内部系统范围，系统B为外部系统。需要通过接口去访问B中的指定文件，然后在浏览器端实现下载

遇到的问题

Q：使用的地址访问是可以出现下载的，但是在js中用ajax做请求时，返回的request headers都正常，但就是不出现下载；

A：Vue的request请求底层是Ajax实现的。Js的Ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。前台提交不要使用ajax提交，不要用$.post等提交，改用传统form表单提交或者location.href，即可解决。

A1：我这里采用的方法是浏览器端采用两次请求。

  第一次请求流程：浏览器向系统A发出下载请求，系统A利用**HttpClient**向系统B发出下载请求下载文件file，请求的结果就是在系统A中生成临时文件fileA & 将文件名filename返回给前端；

  第二次请求流程：浏览器根据第一次请求返回的文件名filename，然后将预先设置好的临时文件路径和filename进行拼接形成文件fileA在系统A中的绝对路径，浏览器根据此绝对路径请求该文件。（利用**window.location.href**）;

对应的代码片段

pom.xml

    <dependency>
			<groupId>org.apache.httpcomponents</groupId>
			<artifactId>httpclient</artifactId>
			<version>4.5.3</version>
		</dependency>

前端代码：VUE + Element UI

/** UI **/
<el-button
  size="mini"
  type="text"
  icon="el-icon-download"
  @click="handleDownload"
  >下载文件</el-button>
  
/** 下载文件  JS**/
    handleDownload() {
   
      const queryParams = this.queryParams;
      this.$confirm('是否确认下载该文件?', "警告", {
   
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
   
          return downloadFile(queryParams);
        }).then(response => {
   
          this.download(response.msg);
        }).catch(function() {
   });
    },
    
// 下载数据
export function downloadFile(query) {
   
  return request({
   
    url: '/report/biaogexf/download',
    method: 'get',
    params: query
  })
}

// 通用下载方法 这里的delete是为了当下载成功后，将服务器中的临时文件删除
export function download(fileName) {
   
	window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true;
}

版本1： 从系统A本地先读取文件输出给Vue端（不涉及HttpClient）

    @GetMapping("download")