Return React 中的 JSZip zip 文件

Question

我有一个压缩文件的功能，但它 return 是一个承诺。我试图实现这个：但它仍然是 return 的承诺，未解决。

我对 promises 不是很熟悉，对 jsZIP 一点也不熟悉 - 如何将此函数用于 return 压缩文件？

const getZip = (url) => {
        setLoadingStatus('zipping...')
        let zip = new JSZip();
        console.log("TYPOF URL", url, typeof url)
        zip.file("Report", url)
        var promise = null;
        if (JSZip.support.uint8array) {
        promise = zip.generateAsync({type : "uint8array"}).then(content => {
            saveAs(content, "Report.zip");
          });
        } else {
        promise = zip.generateAsync({type : "string"}).then(content => {
            saveAs(content, "Report.zip");
          });
        }
        console.log("TYPEOF PROMISE", promise, typeof promise) //typeof is always promise
        return promise
    }

使用异步等待：

    async function getZip(url){
    setLoadingStatus('zipping...')
    let zip = new JSZip();
    console.log("TYPOF URL", url, typeof url)
    zip.file("Report", url)
    var content = null;
    if (JSZip.support.uint8array) {
        content = await zip.generateAsync({type : "uint8array"}).then(content => {
            saveAs(content, "Report.zip");
          })
    } else {
        content = await zip.generateAsync({type : "string"}).then(content => {
            saveAs(content, "Report.zip");
          })
    }
    return content
}

调用getZip()的函数是：

const createURL = useCallback((node, reportHeight, reportWidth, imgHeight) => {

        domtoimage.toJpeg(node, {width: reportInViewerRef.current.offsetWidth, height: reportInViewerRef.current.scrollHeight})
    .then(function (dataUrl) {
        const pdf = new jsPDF('p', 'px', [reportWidth, imgHeight]);
        setLoadingStatus('pdf created')
        pdf.addImage(dataUrl, 'JPEG', 0, -12, reportWidth, reportHeight );
        setLoadingStatus('image added')
        let fileName = getUniqueFilename()
        let base64pdf = getZip(btoa(fileName, pdf.output()));
        console.log("ZIP FILE =================", base64pdf)
        let storageRef = firebase.storage().ref();
        setLoadingStatus('uploading...')
        let fileLocation = '/pdfs/' + fileName + '.zip'
        let reportPdfRef = storageRef.child(fileLocation);
        reportPdfRef.putString(base64pdf, 'base64').then(function() {
            console.log('Uploaded a data_url string!', reportPdfRef,
            reportPdfRef.getDownloadURL().then(function(url) {
                setLoadingStatus('linking...')
                setTemplateParams({
                    to: sessionData.customerEmail,
                    customers: name, 
                    adviser: adviserFullName,
                    adviserEmail: adviserEmail,
                    adviserAvatar: adviserAvatar,
                    content: url

                }) 
                firebase
                .firestore()
                .collection('sessions')
                .doc(sessionData.id)
                .update({
                    'pdfDownloadURL': url
                }).then(function() {
                    setLoadingStatus('sending email')
                    setSendingEmail(false);
                  });
              }).catch(function(error) {
                switch (error.code) {
                  case 'storage/object-not-found':
                        console.log("FILE DOES NOT EXIST")
                    break;
                  case 'storage/unauthorized':
                        console.log("USER DOES NOT HAVE PERMISSION TO ACCESS THIS FILE")
                    break;

                  case 'storage/canceled':
                        console.log("USER CANCELLED THE UPLOAD")
                    break;
                  case 'storage/unknown':
                        console.log("SERVER ERROR")
                    break;
                }
              })
            )
          });
        })
        .catch(function (error) {
            console.error('oops, something went wrong!', error);
        });
}, [])

Answer 1

由于 zip 创建是异步的，处理它的代码也需要是异步的。做你的 createURL 异步处理程序和 await 其中的 zip：

const createURL = useCallback(async (node, reportHeight, reportWidth, imgHeight) => {
    try {
        const dataUrl = await domtoimage.toJpeg(node, {width: reportInViewerRef.current.offsetWidth, height: reportInViewerRef.current.scrollHeight})
    } catch (error) {
        return console.error('oops, something went wrong!', error);
    }

    // ... you can use dataUrl from here

    let base64pdf = await getZip(btoa(fileName, pdf.output()));

    // ... do something with the zip file
}

一般来说，如果一个异步函数 returns 使用它的代码也需要是异步的。

Return React 中的 JSZip zip 文件

Return JSZip zip file in React

jszip

reactjs

es6-promise