vue多文件下载txt，csv，png，jpg

问题描述:

使用a标签请求下载地址时，有的文件可以直接点击执行多文件下载，浏览器他是支持直接下载的。
但是像（txt，csv，png，jpg）后缀的格式，浏览器不支持直接下载，虽然可以打开（可以点击鼠标右键选择另存为）但是多文件下载时特别不友好。

解决办法：

自定义一个axios请求使用（responseType: “blob”）对象。

data是你请求端的路径文件名字。
url是你拼接的请求地址。

multipleSelection是你需要下载的文件的数组对象

解决办法相关代码：

downloaditem(url,data){
      this.$axios
      .get(url, { responseType: "blob" })
      .then(response => {
        const blob = new Blob([response.data]);//调用接口
        const link = document.createElement("a");//
        link.href = URL.createObjectURL(blob);//创建下载链接
        link.download = data;//你的文件名字
        link.click();
        URL.revokeObjectURL(link.href);
      })
      .catch(console.error);
    },
    download(){
      for(var i =0;i<this.multipleSelection.length;i++){  //循环遍历调用downloadFile方法
        const urls = 'data' +'/'+ this.multipleSelection[i].hex;
        const url = 'data' +'/'+ this.multipleSelection[i].ss;
        const data = this.multipleSelection[i].ss;
        downloadFile(urls);
        this.downloaditem(url,data);
      }
    },

由此可完成此功能，喜欢就点个赞吧。不喜勿喷！

如有不明白如何把文件名字写入数组对象中的可以看这个链接：https://blog.csdn.net/ll18704966143/article/details/120200138

此文章借鉴的是：https://www.jianshu.com/p/ec2ab35d00a3