How to download excel stream file and set download file name in Vue

Time:2021-12-5
catalogue
  • summary
  • 1. Download via URL
  • 2. Download through the a tag download attribute combined with the blob constructor
  • 3. Through the JS file download Plug-in

summary

Export excel requirements. 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

Download through window.location.href = file path


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

Through window.open (URL, ‘_blank’)


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

The two methods of use are different:

  • Window.location: jump to the current page, that is, reposition the current page; Only 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 a tag download attribute combined with the 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. It can be 'arraybuffer', 'blob', 'document', 'JSON', 'text', 'stream'. 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 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 tag
            a.style.display = 'none'
            a. Href = href // specify the download link
            a. Download = this. Filename // specify the download file name
            a. Click() // trigger Download
            URL. Revokeobjecturl (a.href) // release URL object
        }
        //You can also download directly from window.open (href) without creating a link
    })
    .catch(err => {
        console.log(err)
    })

Note: when requesting the background interface, {responsetype: ‘blob’} shall 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' // returned data type
    })
    .then(res => {
        fileDownload(res.data, this.fileName)
    })

The above is the details of how to download excel stream files and set the download file name in Vue. For more information about downloading excel stream files and setting the download file name in Vue, please pay attention to other related articles of developeppaer!

Recommended Today

The real problem of Alibaba IOS algorithm can’t hang up this time

More and more IOS developers continue to enter the peak of job hopping in 2020 Three main trends of interview in 2020: IOS bottom layer, algorithm, data structure and audio and video development Occupied the main battlefield. Data structure and algorithm interview, especially figure, has become the main reason for the failure of most first-line […]