Question

我正在使用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");

Answer 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);

当您获得图像时，您必须操纵所有src中的<img>，或者用base64替换它们或将它们引用到文件夹中，如果您将它们放在带有JSZip的文件夹中< / p>

var reader = new FileReader();
reader.onload = function() {
    showout.value = this.result;
};
reader.readAsDataURL(xhr.response);

Answer 2

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

注意：仅当您打包来自相同来源的资源（甚至是图像）或带有'cross-origin-resource-sharing'：'*'
的资源时，此方法才有效
确保JSZip UMD包含在全局名称空间中。在我的角度情况下，我通过npm i -S jszip保存了它，然后将node_modules/jszip/dist/jszip.js脚本复制到了我的src/assets文件夹中，并将其包含在angular.json的脚本数组中。
仅角度：要使jszip打字稿定义文件正常工作，请将node_modules/jszip/index.d.ts复制到src
下载npm i -S file-saver并将其作为ES6模块导入（请参见下文）。
当您希望发生下载事件时运行以下功能：

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');
    });
  }

使用JSzip从URL保存图像

2 个答案: