vue 前端下载excel文件模板

第一步：

  //vue3.0版本的在项目public目录下新建static文件夹，放入“文件模板.xlsx”文件。
  //vue2.0版本的在项目根目录下的static文件夹，放入“文件模板.xlsx”文件。

   
   
    
    

第二步：
在按钮中加入事件

<el-button type="warning" @click="downloadTemplate">Excel模板下载</el-button>

   
   
    
    

第三步：
在 methods中写入如下方法：

 downloadTemplate() {
      
      
      let a = document.createElement("a");
      a.href = "./static/template.xlsx";
      a.download = "文件模板.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
  },

   
   
    
    

可能会出现的问题：vue中通过a标签下载本地文件报错-文件，未找到

问题的解决：
原因之一：下载的模板文件的名字不可以为中文名，若为中文名会报错找不到文件；

原因之二：下载的模板文件必须放在static里面，vue2.0版本的放在项目根目录下的static文件夹，
但是由于vue3.0版本static取消，文件可以放在public里面，或者在public里面新建一个static文件夹，放到它里面；

原因之三：也是最重要的第一点，url的路径问题，如果使用“…/…/public/muban.xlsx”的话，会下载一个空文件
　　　　 因为此时的路径不应该使用相对于当前vue页面的路径，放在public下时，应该使用相对于index.html的路径
　　　　 即“./”即可，然后就可以访问到了；
当然这是通过绑定在button上了，如果单纯的使用a标签下载的话同理
<a href=“./static/template.xlsx” download=“模板.xlsx”></a>

第一步：

  //vue3.0版本的在项目public目录下新建static文件夹，放入“文件模板.xlsx”文件。
  //vue2.0版本的在项目根目录下的static文件夹，放入“文件模板.xlsx”文件。

   
   
  
  

第二步：
在按钮中加入事件

<el-button type="warning" @click="downloadTemplate">Excel模板下载</el-button>

   
   
  
  

第三步：
在 methods中写入如下方法：

 downloadTemplate() {
    
    
      let a = document.createElement("a");
      a.href = "./static/template.xlsx";
      a.download = "文件模板.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
  },

   
   
  
  

可能会出现的问题：vue中通过a标签下载本地文件报错-文件，未找到

问题的解决：
原因之一：下载的模板文件的名字不可以为中文名，若为中文名会报错找不到文件；