0

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>
    </>
  );
}

enter image description here

Screenshot for console.log(allpdf)

enter image description here

in mysql invoice_document is saved as blob enter image description here

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)}
Umair_007
  • 133
  • 1
  • 7
  • 17
  • Do the `allPdf` elements specify a file extension? That may be all you need. https://www.w3schools.com/tags/att_a_download.asp – Drew Reese Jul 29 '20 at 03:01

1 Answers1

1

The problem is that they are Buffers, not Blobs:

<a href="#" href={new Blob([allPdf[index].toString()], { type: "application/pdf"})} download={`invoice-${invoiceNo1}.pdf`}>
  invoiceNo:{invoiceNo1}
</a>
Elias Schablowski
  • 2,619
  • 9
  • 19
  • Thanks Elias, i am facing the same issue as file is showing falied and no file exist. although when i see in the console, i can see for each iteration as... invoice_document: {type: "Buffer", data: Array(56)} (shows above in code). also like to mention that i am retrieving from mysql where it is saved as blob type. – Umair_007 Jul 29 '20 at 09:44
  • i have updated the server side config above, also i can see the pdf file when it is generated in the local storage before i save it to the mysql – Umair_007 Jul 29 '20 at 10:44
  • I updated my answer, though you should look into your db, the returned files are only 56bytes according to your screenshot (the reason I assumed they were filenames), also specify the columns you want to return to prevent leakage, and look at https://stackoverflow.com/a/5959238/11986202 – Elias Schablowski Jul 29 '20 at 19:04