The front-end download or export the file from the back-end method

The front-end download or export the file from the back-end method

Applicable scenarios: In many cases, the front-end needs to download files from the back-end. The typical example is to export the excel table.

There are generally two ways:

1. After requesting the interface, the back end returns the file path, and the front end downloads it directly.
2. After requesting the interface, the back end returns to the front end in the form of a file stream, and the front end downloads it locally.

The first way:

Very simple, after requesting the interface, open the address of the file:

win.loc.href = res.request.responseURL responseURL is actually the same as the interface address. Open it directly to download to the local download path by default.

Very convenient, but there are deficiencies, such as the inability to modify the name of the file.

Moreover, in some scenarios, it is not feasible to use this method. For example, many management systems require login. If you want to log in, you generally need to verify whether each request is secure. It is often necessary to bring the token in the header. The end will give you this request for release.

Therefore, in this way, after you request the interface, go to this link, in fact, you are requesting again. At this time, it is not good for you to bring the token in the request, and naturally you will not be able to get the file you want.

Therefore, the second method is used at this time, which is to download in the form of file streaming.

The second way:

The second way is a normal api request. The back end sends the file stream to the front end. After the front end obtains the file data, it simulates a click of a button to download locally, but this download is not to request another api from the back end. Instead, after the first request for the api, the file data returned by the backend is converted into a suitable format and then downloaded

exportFile(this.queryParam).then(res => {
    if (res.status === 200) {
      const xlsx = 'application/vnd.ms-excel'
      const blob = new Blob([res.data], { type: xlsx })
     //
      const a = document.createElement('a')// a 
     //const name = res.headers['content-disposition']
     //a.download = name.split('=')[1]
      a.download = `${this.$t(' ')}.xlsx`
      a.href = window.URL.createObjectURL(blob)
      a.click()
      a.remove()
      document.body.removeChild(a)//
     // 
     //win.loc.href = res.request.responseURL
    }
  })
 

1. Regardless of the first method or the second method, try to let the back-end specify the file type. Of course, using the second method, the front end can specify the file type again.

2. Convert the obtained file content into blob type data here, which is the most common format for downloading file data, of course, other methods can also be used.

3. Create a tag here to fetch the downloaded file, you can also use other methods, or if you encounter a browser compatibility problem, you may need to personalize it.

4.download Here you can take the file name returned by the backend, or you can define the file name yourself, which is more convenient for you. If the file name obtained by the back end is garbled, it is recommended to define the file name directly on the front end.

5. The most important thing is that many people encounter the problem of garbled downloading files, and the solution is also very simple.

export function exportFile (parameter) {
 return axios({
	 url: `${api.file}/export`,
	 method: 'get',
	 data: parameter,
	header: {
 	 headers: { 'Content-Type': 'application/x-download' }
	},
	responseType: 'blob'
	})
}
 

The responseType must be specified as a blob in the header of the request interface, otherwise the returned file data will be converted into a blob object. If the blob is not recognized, garbled characters will appear.