时间戳

首页 > 解决方案 > 使用 JSZIP 库创建实时图像 src 的 zip 的问题

jquery - 使用 JSZIP 库创建实时图像 src 的 zip 的问题

问题描述

我正在使用 JSZIP 库创建一个 zip 文件。为此，我编写了如下所示的代码，其中src给出了图像。在我的站点中，它是我的实时站点路径。该 zip 文件已正确创建。

问题是它正在创建这样的文件夹结构：

zipFilename->https:->website.com->wp-content->themes->theamename->templates->images->imageName

我想要这样的文件夹结构：

zipFilename->imageName or zipFilename->images->imageName

任何人都可以帮我解决这个问题

function downloadAll() {
  var urls = [];
  $(".image").each(function(index) {
    urls.push($(this).attr('src'));
  });

  var zip = new JSZip();
  var count = 0;
  var zipFilename = "zipFilename.zip";
  urls.forEach(function(url) {
    var filename = "filename";
    JSZipUtils.getBinaryContent(url, function(err, data) {
      if (err) {
        throw err; // or handle the error
      }
      zip.file(url, data, {
        binary: true
      });
      count++;
      if (count == urls.length) {
        zip.generateAsync({
            type: "blob"
          })
          .then(function(blob) {
            saveAs(blob, zipFilename);
          });
      }
    });
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.1/jszip.min.js"></script>
<div class="filename">
  <div class="comresult col-sm-12">
    <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_1_1.png" class="image" width="100PX" height="100PX">
    <b class="name">Google</b>
    <a href="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_1_1.png" download="" id="download" class="btn" style="">DOWNLOAD</a>

    <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_1_1.png" class="image" width="100PX" height="100PX">
    <b class="name">Google</b>
    <a href="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_1_1.png" download="" id="download" class="btn" style="">DOWNLOAD</a>

    <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_1_1.png" class="image" width="100PX" height="100PX">
    <b class="name">Google</b>
    <a href="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_1_1.png" download="" id="download" class="btn" style="">DOWNLOAD</a>
  </div>
  <div class="downloadall col-sm-12">
    <button onclick="downloadAll()" class="directdownload">
      <img width="20px" src="<?php echo get_template_directory_uri(); ?>/assets/images/download.png" alt="Download" style="margin-right: 10px; ">Download All!
    </button>
  </div>
</div>

标签： jqueryjszip

解决方案

我有用

urls.forEach(function (url, i) {
            var filename = urls[i];
            filename = filename.replace(/[\/\*\|\:\<\>\?\"\\]/gi, '').replace("zipFilenamehttpswebsite.comwp-contentthemestheamenametemplatesimages","");
            // loading a file and add it in a zip file
            JSZipUtils.getBinaryContent(url, function (err, data) {
              if (err) {
                throw err; // or handle the error
              }
              zip.file(filename, data, { binary: true });
              count++;
              if (count == urls.length) {
                zip.generateAsync({ type: 'blob' }).then(function (content) {
                  saveAs(content, zipFilename);
                });
              }
            });
          });

它工作正常

推荐阅读