Solve the problem of "failed-file not found" when downloading local files from a tag in the vue project

1. Non-vue projects : Under normal circumstances, we are accustomed to putting local files in the current folder, and then they can be downloaded normally

2. Vue project: Let's still put the local files in the current folder

The error mentioned in the title appeared as follows: 

 Solution: Put the local file in the static folder, it's fine

Method 1: still use the a tag

 <el-button>
      <a href="../../../static/解决vue上传数据模板.xlsx" download>下载</a>
 </el-button>

Since the a tag has its own click style, which may affect the style of our own buttons, the second one can be used

Method 2: Click event

 

  <el-button  @click="downloadExcel"  type="primary">
      下载导入模板
  </el-button>

  downloadExcel() {
      // // window.location.href="http://localhost:80/static/解决vue上传数据模板.xlsx" ; 
       window.location.href="/static/解决vue上传数据模板.xlsx.xlsx"

  },

 Both have the same effect, and the results are as follows:

At this point the problem has been resolved.

Guess you like

Origin blog.csdn.net/a1059526327/article/details/108451232