如何使用 ReactJS 在浏览器中链接下载为 PDF

Question

I am looking to provide the link to download the invoice, i first save all the invoices in an array and when the user click any particular invoice it will download in the browser(keep tracking using index number). but doing this i am facing issue as the file is not saving and showing as.html format, any suggestion please

Snippet of code

function Useraccount({ userinfo, userstatus, allInvoices }) {
  let allPdf = [];

  allInvoices.map((datax) => {
    let onlypdf = datax.invoice_document;

    allPdf.push(onlypdf);
  });
  console.log(allpdf); // screenshot of this console below

  return (
    <>
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Invoice No </TableCell>
              <TableCell> Date of Purchase</TableCell>
              <TableCell> Description</TableCell>
              <TableCell> Invoice</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {allInvoices.map((eachInvoice, index) => {
              console.log(eachInvoice);
              let invoiceNo1 = eachInvoice.invoiceNo;
              let date_of_purchase1 = eachInvoice.date_of_purchase;

              return (
                <TableRow key={invoiceNo1}>
                  <TableCell>{invoiceNo1}</TableCell>
                  <TableCell>{date_of_purchase1}</TableCell>
                  <TableCell>TBO</TableCell>
                  <TableCell>
                    <a href='#' download={allPdf[index]}>
                      invoiceNo:{invoiceNo1}
                    </a>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
}

Screenshot for console.log(allpdf)

in mysql invoice_document is saved as blob

on node.js serverside

app.post("/api/invoice", (req, res) => {
 pdf.create(pdfTemplate(customer_dataand_Itemsbought), {}).toFile(`./${user_details.Invoice_No_latest}.pdf`, function (err, res) {}

connection.query(
                  "UPDATE users_basket SET invoice_document=? WHERE invoiceNo=?;",
                  [`${__dirname}/${user_details.Invoice_No_latest}.pdf`, user_details.Invoice_No_latest],
                  function (err, results) {}
 connection.query("SELECT * FROM  users_basket WHERE users_user_id=?;", [user_id], function (err, results) { res.json(results)}

Answer 1

The problem is that they are Buffer s, not Blob s:

<a href="#" href={new Blob([allPdf[index].toString()], { type: "application/pdf"})} download={`invoice-${invoiceNo1}.pdf`}>
  invoiceNo:{invoiceNo1}
</a>