React-tsx-下载 Zip 格式的多个图像文件

Question

我想下载包含多个图像的 zip，我使用 js-zip 但它不允许我使用 jszip-util 它的显示找不到名称 JSZipUtils 因为我认为是我的 TSX 文件。这是我试过的一些代码..

    import * as React from 'react';
    import  JSZip from 'jszip';
    import FileSaver from 'file-saver';

    class ZipDemo extends React.Component{
        download =()=>{
        let links:string[]=[
            "https://sequenceimagestaging.blob.core.windows.net/retouch/3xl/100/1610004/one.jpg?v=1569588865599",
             "https://sequenceimagestaging.blob.core.windows.net/retouch/3xl/900/2411015/two.jpg?v=1569588865599",
             "https://sequenceimagestaging.blob.core.windows.net/retouch/l/200/3310029/three.jpg?v=1569588865599",
             "https://sequenceimagestaging.blob.core.windows.net/retouch/m/300/3237036/four.jpg?v=1569588865599",
             "https://sequenceimagestaging.blob.core.windows.net/retouch/s/400/5372009/five.jpg?v=1569588865599"
        ];
        var zip = new JSZip();
        var count = 0;
        var zipFilename = "Pictures.zip";  
        links.forEach(function (url, i) {
          var filename = links[i];
          filename = filename.replace(/[\/\*\|\:\<\>\?\"\]/gi, '').replace("httpssequenceimagestaging.blob.core.windows.netretouch","");
          JSZipUtils.getBinaryContent(url, function (err, data) {
            if (err) {
              throw err;
            }
            zip.file(filename, data, { binary: true });
            count++;
            if (count == links.length) {
              zip.generateAsync({ type: 'blob' }).then(function (content) {
                FileSaver.saveAs(content, zipFilename);
              });
            }
          });
        });
    }

    render() { 
        return (  
            <div>
                <button onClick={this.download}>click me </button>
            </div>
        );
    }
}

export default ZipDemo;

我参考了jsfiddle

Answer 1

JSZipUtils 似乎是一个单独的项目，也需要导入。尝试 https://www.npmjs.com/package/jszip-utils?

Answer 2

let blob = fetch(url).then(r => r.blob());
    zip1.file(filename, blob, { binary: true });

在

的 space 中添加这 2 行

JSZipUtils.getBinaryContent(url, function (err, data) {
        if (err) {
          throw err;
        }
        zip.file(filename, data, { binary: true });

它工作得很好，因为 jszip-utils 模块在打字稿中不可用我想我不确定，所以它是将文件转换为二进制文件的替代方法。

React-tsx-下载 Zip 格式的多个图像文件

React-tsx-Download Multiple image file in Zip format

zip

download

reactjs

tsx