时间戳

首页 > 解决方案 > React-tsx-以Zip格式下载多个图像文件

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

问题描述

我想下载包含多个图像的 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

标签： reactjsdownloadziptsx

解决方案

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

推荐阅读