带有http路径的jszip下载文件答案

【问题标题】：jszip download file with http path带有http路径的jszip下载文件
【发布时间】：2018-09-11 13:15:17
【问题描述】：

我尝试使用本地主机的url 下载images

我的代码在这里

<head>
  <script src="Stuk-jszip-9fb481a/dist/jszip.js"></script>
  <script>
    window.onload = function() {
      var zip = new JSZip();
      var a = document.querySelector("a");
      var urls = ["http://localhost/cce/assests/images//save_img.png"];

      function request(url) {
        return new Promise(function(resolve) {
          var httpRequest = new XMLHttpRequest();
          httpRequest.open("GET", url);
          httpRequest.onload = function() {
            zip.file(url, this.responseText);
            resolve()
          }
          httpRequest.send()
        })
      }

      Promise.all(urls.map(function(url) {
          return request(url)
        }))
        .then(function() {
          console.log(zip);
          zip.generateAsync({
              type: "blob"
          })
          .then(function(content) {
            a.download = "folder" + new Date().getTime();
            a.href = URL.createObjectURL(content);
            a.innerHTML = "download " + a.download;
          });
        })
    }
  </script>
</head>

<body>
  <a href="" download>download</a>
</body>

但它的创建文件夹http 而不是存储图像

在控制台中显示

http:/
:
ZipObject {name: "http:/", dir: true, date: Tue Sep 11 2018 18:39:38 GMT+0530 (India Standard Time), comment: null, unixPermissions: null, …}
http://localhost/
:
ZipObject {name: "http://localhost/", dir: true, date: Tue Sep 11 2018 18:39:38 GMT+0530 (India Standard Time), comment: null, unixPermissions: null, …}

【问题讨论】：

标签： javascript jquery html jszip

【解决方案1】：

试试这个代码

<head>
  <script src="Stuk-jszip-9fb481a/dist/jszip.js"></script>
  <script>
    window.onload = function() {
      var zip = new JSZip();
      var a = document.querySelector("a");
      var urls = ["http://localhost/cce/assests/images//save_img.png"];

    const toDataURL = url => fetch(url)
      .then(response => response.blob())
      .then(blob => new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onloadend = () => resolve(reader.result)
        reader.onerror = reject
        reader.readAsDataURL(blob)
      }));


      function request(url) {
        return new Promise(function(resolve) {
          toDataURL(url)
              .then(dataUrl => {
                zip.file("image.png", dataUrl.substr(dataUrl.indexOf(',')+1), {base64: true});
                resolve()
              });
              })
      }

      Promise.all(urls.map(function(url) {
          return request(url)
        }))
        .then(function() {
          console.log(zip);
          zip.generateAsync({
              type: "blob"
          })
          .then(function(content) {
            a.download = "folder" + new Date().getTime();
            a.href = URL.createObjectURL(content);
            a.innerHTML = "download " + a.download;
          });

        })

    }
  </script>
</head>

【讨论】：

错误是什么？我在本地主机上试了一下，效果很好。