由response.download()回應的檔案并下載為包含未定義的blob

我正在構建一個客戶端-服務器證書生成器。

在后端 我使用兩個端點：

/

• 接收包含從輸入中提取的資料的 JSON，對其進行清理，并回傳它們是否有效

/download

• 接收資料是否有效。如果是，則生成一個certificate.pdf檔案并使用res.download(certificatePath)
• 我想我應該使用某種令牌/身份驗證/授權，因為有人可以忽略第一個端點，但是一旦下載本身被修復，我就會這樣做

我認為后端的問題在于其中一些功能：

const getCertificatePDF = (name, validValuesData, validValuesQty, response) => {
    // ... ommited for brevity
    pdf.create(document, options)
        .then(res => {
            console.log(res)
            let filePath = path.join(__dirname, 'certificate.pdf');
            console.log("FILE PATH: ", filePath);                            
            response.download(filePath, "certificate.pdf");
        })
        .catch(error => {
            console.error(error)
        });
}

app.post('/download', (req, res) => {
    const data = req.body;
    console.log("DATA", data);
    getCertificatePDF(data.name, data.validValuesData, data.validValuesQty, res)
});

在前端，我使用承諾鏈接了兩個申請，創建了一個blob，創建了一個帶有download屬性的鏈接blob并觸發了一個onClick：

const sendForm = (filledCodeValues, email, name) =>{
    // ...ommited for brevity

    fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: data,
      })
        .then((res) => res.json())
        .then((processedData) => {
            alertAllFilledInvalid(processedData.validValuesQty)
            const dataString = JSON.stringify(processedData);
            if(processedData.validValuesQty > 0){
                console.log("DATA STRING ", dataString)
                const downloadUrl = url   "download";
                fetch(downloadUrl, {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: dataString,
                  })
                .then((res2) => {
                    res2.blob()
                })
                .then((blob)=>{
                    const newBlob = new Blob([blob]);
                    const newUrl = window.URL.createObjectURL(newBlob);

                    const link = document.createElement('a');
                    link.href = newUrl;
                    link.setAttribute('download', 'certificate.pdf');
                    document.body.appendChild(link);
                    link.click();
                    link.parentNode.removeChild(link);

                    window.URL.revokeObjectURL(newBlob);
                })
            }
        })
}

問題

問題是，certificate.pdf前端下載的內容包含undefined：

我知道第一個請求是正確的，因為它console.log()正在列印預期的內容stringData：

我也知道第二個請求有效，因為在后端，certificate.pdf 正在正確生成：

Ps - 我certificate.pdf在后端手動洗掉以確保它是新生成的

由于正在生成證書，我認為其中任何一個都有問題：

1. 后端的response.download(filePath, "certificate.pdf");
2. 前端 blob 創建和下載

I manually moved certificate(25).pdf (generated by frontend) to backend and run a script for reading both certificate.pdf(generated by backend) files, to test if the issue is on filePath using a readFiles.js script:

const fs = require('fs');
let path = require('path');

let filePath = path.join(__dirname, 'certificate.pdf');
console.log("FILE PATH: ", filePath);
fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log(">>>>> FilePath content <<<<< ", data);
});


let filePath2 = path.join(__dirname, 'certificate(25).pdf');
console.log("FILE PATH 2: ", filePath2);
fs.readFile(filePath2, 'utf8', (err, data) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log(">>>> FilePath2 content <<<< ", data);
});

It turns out the path is correct, and certificate.pdf (backend) has content, while certificate(25).pdf (frontend) has just an undefined value.

Can someone help me please?

uj5u.com熱心網友回復：

You need to return the value of res2.blob():

.then((res2) => {
  return res2.blob()
})

Or leave out the brackets:

.then((res2) => res2.blob())

標籤：javascript node.js express

上一篇：重命名檔案并將重命名的檔案復制到主檔案夾中的subbolder

下一篇：使用OpenCV和Python多處理進行恒定攝像頭抓取