The Vue project uses the axios request interface to download excel

In this article, we share the specific code of Vue project using axios request interface to download excel for your reference. The specific contents are as follows

As far as I know, there are three ways to download the front end, the first is to download through a tag, the second is to download through window. location, and the third is to download through requesting the background interface. Let's record these three ways today.

Method 1: Pass the a tag

// href Is the storage path or address of the file, download To ask the file name 
<a href="/images/logo.jpg" rel="external nofollow" download="logo" />

Advantages: Simple and convenient.
Disadvantages: This download method only supports Firefox and Chrome, but not IE and Safari, so the compatibility is not good enough.

Method 2: Pass window. location

window.location = 'http://127.0.0.1:8080/api/download?name=xxx&type=xxx'

Advantages: Simple and convenient.
Disadvantages: Only get request, when there is token verification is inconvenient.

Method 3: By requesting the background interface

// download.js
import axios from 'axios'

export function download(type, name) {
 axios({
 method: 'post',
 url: 'http://127.0.0.1:8080/api/download',
 // headers Set inside token
 headers: {
 loginCode: 'xxx',
 authorization: 'xxx'
 },
 data: {
 name: name,
 type: type
 },
 // 2 Binary stream file, 1 Be sure to set to blob The default is json
 responseType: 'blob'
 }).then(res => {
 const link = document.createElement('a')
 const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
 link.style.display = 'none'
 link.href = URL.createObjectURL(blob)
 link.setAttribute('download', `${name}.xlsx`)
 document.body.appendChild(link)
 link.click()
 document.body.removeChild(link)
 })
}

// download.java
@RequestMapping(value = "/api/download",produces = "application/octet-stream", method = RequestMethod.POST)
public void downloadTemplate(@RequestBody Map<String,Object> paramsMap, HttpServletResponse response) {
 try {
 if (paramsMap.get("type").equals("xxx") && paramsMap.get("name").equals("xxx")) {
 String[] str = new String[]{" District and county "," Province to which it belongs "," City to which it belongs "};
 Workbook workbook = ExportExcel.exportExcel(" Template of administrative division table ", str, null, "yyyy-MM-dd");
 download(response, workbook, "CityDict");
 }
 } catch (Exception e) {
 e.printStackTrace();
 }
}

private void download(HttpServletResponse response, Workbook workbook, String fileName) {
 try {
 response.setContentType("application/octet-stream;charset=UTF-8;");
 response.addHeader("Content-Disposition", "attachment;fileName=" + fileName + ".xlsx");
 ByteArrayOutputStream by = new ByteArrayOutputStream();
 OutputStream osOut = response.getOutputStream();
 //  Writes the specified bytes to this output stream 
 workbook.write(osOut);
 //  Refresh this output stream and force all buffered output bytes to be written out 
 osOut.flush();
 //  Close flow 
 osOut.close();
 } catch (IOException e) {
 LogUtils.getExceptionLogger().info(" Error downloading template :{}", e.getMessage());
 }
}

Advantages: You can set token in headers, the file is generated in java code, and the generated file is more flexible.
Disadvantages: It is complicated to implement.

For the learning tutorial of vue. js, please click on the special vue. js component learning tutorial and Vue. js front-end component learning tutorial to learn.