How to implement download function in javascript

How to implement the download function in javascript: 1. Download through the a tag; 2. Download through the "window.open" method; 3. Download through the "location.href" method; 4. Through file transfer The blob object implements the download function.

The operating environment of this tutorial: Windows 10 system, javascript version 1.8.5, Dell G3 computer.

How to implement the download function in javascript?

js implements file download function

1. a tag download

 a标签下载  

Advantages:

• You can directly download txt, png, pdf, exe, xlsx and other types of files

Disadvantages:

• a tag can only do get requests , so the url has a length limit

• Unable to obtain download progress

• Cross-domain restrictions

• Unable Carrying the token in the header for authentication operation

• Unable to determine whether the interface is successful

• IE compatibility issues

2. Download window.open

 window.open下载  

Advantages:

• Simple and convenient

Disadvantages:

• There will be a URL length limit problem

• You need to pay attention to the url encoding problem

• Unable to get the download progress

• Unable to carry token in header for authentication operation

• Unable to determine whether the interface is successful

• Unable to directly Download file types that can be directly previewed by the browser (txt, png, pdf will be previewed directly)

3. Download location.href

 location.href下载   

Advantages

• Simple, convenient and direct

• Can download large files (G or above)

Disadvantages

• There will be a URL length limit problem

• You need to pay attention to the url encoding problem

• Unable to get the download progress

• Cannot carry token in header for authentication operation

• Cannot directly download file types that can be previewed directly by the browser (txt, png, pdf will be previewed directly)

• Unable to determine whether the interface returns successfully

3. File transfer blob object download

文件流转blob对象下载 

Advantages:

• You can download txt, png, pdf and other types of files

• You can carry token in the header for authentication operation

• You can get the file download progress

• You can judge whether the interface returns successfully

Disadvantages:

• Compatibility issues, not available below IE10, pay attention to Safari browser, the official website states that Safari has a serious issue with blobs that are of the type application/octet-stream

• Return the backend It will be downloaded only after all the file streams have been obtained

Recommended learning: "JavaScript Video Tutorial"

The above is the detailed content of How to implement download function in javascript. For more information, please follow other related articles on the PHP Chinese website!