React-tsx-Download Несколько файлов изображений в формате Zip - PullRequest
Новая
       53

React-tsx-Download Несколько файлов изображений в формате Zip

0 голосов
/ 28 сентября 2019

Я хочу скачать 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

Ответы [ 2 ]

0 голосов
/ 30 сентября 2019 
let blob = fetch(url).then(r => r.blob());
    zip1.file(filename, blob, { binary: true });

добавить эти 2 строки в пространстве 

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

, это работает очень хорошо, потому что модуль jszip-utils недоступен в машинописи, я думаю, что я не уверен, так что это альтернативный способпреобразовать файл в двоичный файл.

0 голосов
/ 28 сентября 2019

JSZipUtils представляется отдельным проектом, и его также необходимо будет импортировать.Попробуйте https://www.npmjs.com/package/jszip-utils?

...