第一步

  //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>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐