Vue2 pure front-end implements downloading excel files, and it can be downloaded normally in both local and test environments.
1. Put the excel file provided by the backend into the local project folder, and the location is as shown in the figure:
2. Introduce the excel file into the page that needs to display the download function, as shown in the figure:
3. Use a link, href Bind the imported excel file path and add the download attribute. The download attribute value is the name of the downloaded file, as shown in the figure:
4. Here comes the key question. After introducing the file path, you will find that the project reports a missing loader error, so you need to Install file-loader:
npm install file-loader
5. After installing the dependencies, add configuration in vue.config.js:
6. Then restart the project, so that the download function is realized~
I have tried other methods before, and it can be achieved When downloading locally, a 404 is reported in the test environment, or the downloaded excel file opens with empty content. This method has been tested by myself and there is no problem whether it is local or in the test environment!
Reference articles for this article:
https://zhuanlan.zhihu.com/p/557556752
https://www.jianshu.com/p/5318ce68a6aa