How to download excel stream files and set download file name in vue

Overview

Export excel requirements. When you click to download the template or download the feedback results, axios initiates a backend interface request, and garbled characters appear when the returned data gets the response, as shown in the figure:

The following are some treatment methods.

1. Download via URL

That is, the backend provides the address of the file and you can download it directly using the browser

Download via window.location.href = file path

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

Via window.open(url, '_blank')

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

The difference between these two usage methods:

• window.location: jump to the current page, that is, relocate the current page; only the web pages of this website can be opened on 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 a new addition to the HTML5 standard. Its function is to trigger the browser's download operation instead of navigating to the download URL. This attribute can be set to use a new file name when downloading.

The front end creates a hyperlink and receives the file stream from the back end:

axios.get(`/operation/ruleImport/template`, {
        responseType: "blob" //The data type of the server response, which 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 the 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 the download URL.revokeObjectURL(a.href) //Release the URL object }
        // You don't need to create a link here, you can also download it directly by calling window.open(href)})
    .catch(err => {
        console.log(err)
    })

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

3. Through js-file-download plugin

Install:

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)
    })

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 on 123WORDPRESS.COM!