There are several common ways

  • Click the URL directly using the A tag
  • Mount using the iframe label
  • Use AXIos to request the URL for the BLOB transformation, and then add the A tag
  • Using form submission

aLabel click mode

steps

  1. The interface URL was obtained. Procedure

  2.  const link = document.createElement('a')
 link.style.display = 'none'
 link.href = url
 link.setAttribute('download'.'test.zip')
 link.click()
Copy the code

    Note: The use of the download attribute of the A tag

The advantages and disadvantages

  1. Advantage 1: The method is simple and generally can be implemented without writing an extra progress bar
  2. Advantage 2 The A tag doesn’t need to be mounted to the DOM, just execute a click() event on the A tag to trigger the browser to download the file
  3. Disadvantages: When you click different files to download consecutively, or when the network speed is slow, if the server does not respond to the next file to download consecutively (the request will be cancelled), the previous file cannot be downloaded, that is, only the last click to download takes effect

iframeLabel mounting mode

steps

  1. The interface URL was obtained. Procedure
  2.  const link = document.createElement('iframe')
 link.style.display = 'none'Link. SRC = / url/note iframe label must be mounted to the dom, otherwise you won't trigger the browser to download (is one of the drawbacks) document. The body. The appendChild (link)Copy the code

The advantages and disadvantages

  1. Advantage 1: The method is simple and can be generally implemented without the need to write an extra progress bar
  2. Advantage 2: Avoid server unresponsiveness when downloading different files in a row, i.e. the request will not be cancelled (solve the problem of a tag)
  3. Disadvantage 1 The IFrame tag must be mounted to the DOM and cannot be removed until the request is successful

Axios request urlway

steps

  1. Step 1 Requires an axiOS instance that converts the request result into a BLOB stream format to request the URL

    (Assume the request is a GET request)

    Note: Several of the more important apis in the code (taken from MDN)

    (1). ResponseType:

    XMLHttpRequest responseType attribute is an enumerated type attribute, returns the response data types. It allows us to manually set the type of data to be returned. If we set it to an empty string, it will use the default “text” type.

    Setting the responseType value to “document” in the Work Environment is generally ignored. When setting responseType to a specific type, you need to make sure that the type returned by the server is compatible with the type you set to return. What if the two types are incompatible? Congratulations, you will find that the data returned by the server becomes NULL, even though the server returned data. Also note that setting responseType to a synchronous request raises an InvalidAccessError exception.

    ResponseType supports the following values:

    (2). FileReader:

    The FileReader object allows a Web application to asynchronously read the contents of a File (or raw data buffer) stored on the user’s computer, using a File or Blob object to specify which File or data to read.

    (3). The HTTP Header:

    Content-type Indicates the actual request header. In a common data request, ‘Application /json’ is returned. charset=utf-8′

  2. Step 2 Require a file conversion method blobToFile(blob, fileName)

    CreateObjectURL (); create a new tag, click on the tag, and release the URL object.

  3. Step 3 Call the request download method and perform file conversion, that is:

    Import {DOWNLOAD_GET} from'./API/get'
import blobToFile from from '@/utils/blobToFile'

// methods
getDownLoadFile() {
    return DOWNLOAD_GET(`${url}`) 
}
async downLoadFile() {// this.url is the address of the file. // this.filename is the name of the file. Try {const blob = await this.getdownfile (this.url) blobToFile(blob, this.filename)}}Copy the code