5

我正在使用 JSzip 下载 div 的 html。div 里面有图像（它们不是 base64 编码的）。有没有办法可以使用 JSzip 从他们的图像路径 url 下载文件？还是必须进行base64编码？

我当前的代码只是来自 JSzip 站点 ( http://stuk.github.io/jszip/ )的基本演示代码

    var zip = new JSZip();
    var email = $('.Result').html();
    zip.file("test.html", email);
    var content = zip.generate({type:"blob"});
    // see FileSaver.js
    saveAs(content, "example.zip");
4

3 回答 3

7

您可能想尝试使用JSzip-utils，它仅用于从 url 下载图像，还可以查看JSzip文档中的示例，我发现它非常好。您可以在此处找到带有代码的工作示例。

这只是下载的一部分，我还使用它们的图像源 URL 从社交媒体下载图像。

function urlToPromise(url) {
return new Promise(function(resolve, reject) {
    JSZipUtils.getBinaryContent(url, function (err, data) {
        if(err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
});
}
var zip = new JSZip();
zip.file(filename, urlToPromise(url), {binary:true});
zip.generateAsync({type:"blob"})
.then(function callback(blob) {

    // see FileSaver.js
    saveAs(blob, "example.zip");
});
于 2018-02-27T06:57:33.673 回答
1

首先，您需要使用 ajax 下载所有图像。如果他们在同一个域上，那么你很幸运，否则你需要 CORS 或代理。

var xhr = new XMLHttpRequest();

xhr.addEventListener('load', function(){
   if (xhr.status == 200){
      //Do something with xhr.response (not responseText), which should be a Blob
   }
});

xhr.open('GET', 'http://target.url');
xhr.responseType = 'blob';
xhr.send(null);

当你得到图像时，你必须操作srcin all<img>要么用 base64 替换它们，要么将它们引用到一个文件夹，如果你把它们放在一个带有 JSZip 的文件夹中

var reader = new FileReader();
reader.onload = function() {
    showout.value = this.result;
};
reader.readAsDataURL(xhr.response);
于 2014-10-29T16:38:23.933 回答
0

这是我在角度框架内构建的解决方案（改编自此处）（尽管很容易适用于其他前端方法）：

  1. 注意：这仅适用于打包资源——甚至图像——来自同一来源，或者使用 'cross-origin-resource-sharing': '*'

  2. 确保 JSZip UMD 包含在您的全局命名空间中。在我的角度案例中，我通过 保存它npm i -S jszip，然后将node_modules/jszip/dist/jszip.js脚本复制到我的src/assets文件夹并将其包含在 angular.json 的脚本数组中。

  3. 仅限 Angular：要使 jszip 打字稿定义文件正常工作，请将node_modules/jszip/index.d.ts某处复制到src

  4. 下载npm i -S file-saver并将其作为 ES6 模块导入（见下文）。

  5. 当您希望下载事件发生时，请运行以下函数：

import { saveAs } from 'file-saver';

async downloadData() {

    // Fetch the image and parse the response stream as a blob
    const imageBlob = await fetch('[YOUR CORS IMAGE URL]').then(response => response.blob());

    // create a new file from the blob object
    const imgData = new File([imageBlob], 'filename.jpg');

    // Copy-pasted from JSZip documentation
    var zip = new JSZip();
    zip.file('Hello.txt', 'Hello World\n');
    var img = zip.folder('images');
    img.file('smile.gif', imgData, { base64: true });
    zip.generateAsync({ type: 'blob' }).then(function(content) {
      saveAs(content, 'example.zip');
    });
  }
于 2020-11-11T18:41:06.893 回答