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>

  • 7
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值