PDF 使用 ReactJS MySql 生成成功但未在浏览器中显示为可下载

Question

II am struggling to download the pdf file in browser, i have created the pdf at back end and can see the file locally in back end and then i save it in the mysql (screenshot below) and after that using API call i retrieve the pdf document to be downloadable on browser but it is showing filename as [object object] and status failed:no file when trying to download. I have looked around and see some places to convert pdf to base64 but i am not sure if i need it. any suggestions please.

snippet of backend-Nodejs code

1. Backend - sending file through API call

     let token = req.cookies.access_token;
     if (token) {
       let Invoice_No_Actual = req.body.invoice_Name;
// the below two res.set has been set now

     res.set("Content-disposition", "attachment; filename=" + `${__dirname}\\` + `${Invoice_No_Actual}` + `.pdf`);
               res.contentType("application/pdf");

  res.send(`data:application/pdf;base64,${new Buffer.from(data).toString("base64")}`);
     }
   });

2. Front end snippet of code

         
        console.log("content", content);// this content if i convert online tool it does shows the correct PDF file 
        
    
        const blob = new Blob([content], { type: "application/pdf" });
        console.log(blob);
        const link = document.createElement("a");
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
      };

     const generatePdf = (invoice_Name) => {
        let invoice_Object = {
          invoice_Name: invoice_Name,
        };

    const headers = new Headers();
    headers.append("content-type", "application/json");
    headers.append("responseType", "blob");
    // headers.append("responseType", "blob");
    const options = {
      method: "POST",
      headers,
      credentials: "include",
      body: JSON.stringify(invoice_Object),
    };
    const newRequest = new Request("http://localhost:5000/api/invoice-only", options);

    (async () => {
      const invoice_Call = await fetch(newRequest)
        .then((res) => {
           
          return res.text();  
          
        })
        .then((data) => {
          
          generateFile(data, invoice_Name);
        });
    })();
  };

3. Frontend code that triggers the API call

     let invoice_Name = `${users_user_id}` + `_` + `${invoiceNo}`; 
// to get the specific invoice (userid_invoiceNO) usefull to get specific file from backend
        <span role="button" tabIndex="-1" onKeyDown={() => generatePdf(invoice_Name)} onClick={() => generatePdf(invoice_Name)}>invoiceNo:{invoiceNo}
         </span>

4. when doing the console i get the following console.log("resxx", res) console.log("textxx", data);

Answer 1

If you are sending the above file through your API as an attachment then you want to use a javascript blob to read the file since it's non-native.

const generateFile = (content, fileName) => {
  const blob = new Blob([content]);
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
}

const generatePdf = () => {
  (...some api request here)
    .then(res => {
        ...catching the response here
        const filename = 'new_file.pdf'; // You can get this name from the API
        generateFile(res, filename))
    .catch(.....)
}

return (
  <span
      role="button"
      tabIndex="-1"
      onKeyDown={generatePdf}
      onClick={generatePdf}
    >
     Download PDF
    </span>
)

Here we are creating a new Blob from the content sent through the API and then triggering a download popup to show up in the browser.