vue中a标签下载本地文件-未找到【已解决】

首先

 download(url, filename) {
          return fetch(url).then(res => res.blob().then(blob => {
          console.log(res)
              let a = document.createElement('a');
              let url = window.URL.createObjectURL(blob);
              a.href = url;
              a.download = filename;
              a.click();
              window.URL.revokeObjectURL(url);
          }))
      },
    Downloads(){
    this.download('./muban.xlsx','参考模板.xlsx')
    },

Dowloads通过动态创建一个a标签来实现下载功能,所有的地方都没有问题,为什么会报错

然后我搜了一下总结了一下问题所在

第一点:文件名字不可以为中文名

第二点:文件必须放在static里面,但是由于vue3.0版本static取消,文件可以放在public里面

第三点:也是最重要的第一点,url的路径问题,如果使用"../../public/muban.xlsx"的话,会下载一个空文件

    因为此时的路径不应该使用相对于当前vue页面的路径,放在public下时,应该使用相对于index.html的路径

    即"./"即可,然后就可以访问到了

当然这是通过绑定在button上了,如果单纯的使用a标签下载的话同理

<a href="./muban.xlsx" download="模板.xlsx"></a>

这样就可以啦~感谢观看~