Updated on October 26, 2018

There are a lot of retention issues in the comments section, such as incompatibility with IE11, inability to download TXT and video files, etc. I have not confirmed the download problem of TXT and video. But they are valuable.

Others have proposed a series of solutions, such as using JsZip to achieve bulk file packaging download; Use fileSaver. Js + Blob to download files. Although I haven’t had a chance to verify one by one, thank you very much for your valuable solutions, but also for readers of this article to provide a way to solve the problem.

It’s hard to believe, but I just tried downloading files directly from location, and it worked pretty well, not only in Internet Explorer 11, but also in Safari.

The specific implementation is as follows:

window.location.href = yourFilePath
Copy the code

Here yourFilePath is the address of the interface that calls the background file download. The background returns a file stream in the interface for the front-end to download.

In fact, the downLoadTemplateURL I refer to below is also the interface address of the background file download. At the beginning of the statement is not very clear, may cause a part of the reader misunderstanding, in this special declaration.

The file download function has been handled in the window.open(URL) mode. This of course can also achieve the file download function, but also very convenient to use.

But one test found that this method didn’t work in Safari, so I started looking for a more compatible download implementation. What I recommend today is a solution that I’ve been using and haven’t found compatibility issues so far. Of course, if you find any bugs in the process of using this program, you are welcome to speak in the comments section, find problems, solve problems, to promote the common growth of everyone.

In fact, the tag in HTML not only has the function of navigation link, but also can realize the function of file download. Specific usage is as follows:

<a id="downLoadExcel" :href="downLoadTemplateURL" :download="filename"></a>
Copy the code

Add the Download attribute in the TAB to realize the download function. It is best to specify the file name for the download in the front end, because sometimes providing the file name in the background can be garbled, and there is no need to specify the file name in the front end.

The downLoadTemplateURL and filename are both dynamically assigned so that code can be reused without modification in both development and production environments.

The specific implementation code is as follows:

downLoadExcelTemplate() {
    const vm = this
    vm.downLoadTemplateURL = vm.apiHost + "downloadYourFileURL"
    vm.filename = "myTest.pdf"
    setTimeout( (a)= > {
      document.querySelector("#downLoadExcel").click()
    },500)},Copy the code

Here, I use the method of clicking a custom button and actively triggering the click event of label in the click event of the custom button. This allows additional action before triggering the file download function.

In the case of click, the setTimeout() method is used to give the browser enough time to render the variable value into the tag after changing the download path and file name. Otherwise, when the click event is triggered, the corresponding value has not been successfully rendered and the download will not be successful.

After testing, this method can fully meet the needs of most departments. If you have any other solutions, please share them. We can learn together and make progress together.

conclusion

If you liked this post, please like it and follow us. Your support is the biggest motivation for me to continue sharing.