js/vue一个简单的批量下载图片方法

js/vue一个简单的批量下载图片方法

方法如下：

   clickExport() {
       //如果没有跨越问题直接用图片地址
      let arry = ["/api/token/images/beth_32.png?v=1", "/api/token/images/dai_32.png"];
      (arry.forEach(function (url, index) {
        setTimeout(() => {//setTimeout是为了防止arry太多导致下载终端机
          let link = document.createElement('a')
          // 这里是将url转成blob地址，
          fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
            link.href = URL.createObjectURL(blob)
            let temp = url.split("?");
            temp = temp[0].split("/");
            let name = temp[temp.length - 1];//获得图片名字
            link.download = name;
            document.body.appendChild(link);
            link.click()
          })
        }, index * 1000)//1000是为了使得浏览器能稳定下载  这个时间可自调建议大于500 
      }))
    }
      

注意：
1，关闭浏览器每次下载询问下载位置功能
2，vue跨越在vue.config.js文件

module.exports = {
  //。。。。。。
  //添加下面配置并重新run
  devServer: {
    proxy: {  //配置跨域
      '/api': {
        target: 'http://xxxxxx',  //写导致跨越的域名或ip
        changOrigin: true,  //允许跨域
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/yyyy 时
            实际上访问的地址是：http://xxxxxx/yyyy,因为重写了 /api
           */
          '^/api': ''
        }
      },
    }
  },
}