Following the previous article, there are import and export requirements.

excel files are required to be exported. When you click download template or download feedback results, axios initiates a back-end interface request, and the returned data is garbled when obtaining the response, as shown in the figure:

Several treatment methods are summarized as follows.

1. Download via url

That is, the back-end provides the address of the file and directly uses the browser to download it

• Through window location. Href = file path Download

  window.location.href = `${location.origin}/operation/ruleImport/template`

• Through window open(url, '_blank')

  window.open(`${location.origin}/operation/ruleImport/template`)

Differences between the two methods of use:

• window.location: jump to the current page, that is, reposition the current page; Only the pages of this website can be opened in the website.
• window.open: open the link in a new window; You can open the address of another website on the website.

2. Download through the download attribute of a tag and blob constructor

The download attribute of the a tag is added in the HTML5 standard to trigger the browser's download operation rather than navigating to the download url. This attribute can set the new file name to be used during download.

Create a hyperlink at the front end and receive the file stream at the back end:

axios.get(`/operation/ruleImport/template`, {
        responseType: "blob" //The data type of the server response can be 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream', and the default is' json '
    })
    .then(res => 
        if(!res) return
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // Construct a blob object to process the data and set the file type
        
        if (window.navigator.msSaveOrOpenBlob) { //Compatible with IE10
            navigator.msSaveBlob(blob, this.filename)
        } else {
            const href = URL.createObjectURL(blob) //Create a new URL to represent the specified blob object
            const a = document.createElement('a') //Create a label
            a.style.display = 'none'
            a.href = href // Specify download link
            a.download = this.filename //Specify download file name
            a.click() //Trigger Download
            URL.revokeObjectURL(a.href) //Release URL object
        }
        // Instead of creating a link, you can directly window Open (href) can also be downloaded
    })
    .catch(err => {
        console.log(err)
    })

Note: when requesting the background interface, {responseType: 'blob'} should be added to the request header; download when setting the file name, you can directly set the extension. If it is not set, the browser will automatically detect the correct file extension and add it to the file.

3. Through the JS file download Plug-in

• Installation: NPM install JS file download -- S

• use

  import fileDownload from 'js-file-download'
  
  axios.get(`/operation/ruleImport/template`, {
          responseType: 'blob' //Data type returned
      })
      .then(res => {
          fileDownload(res.data, this.fileName)
      })