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

Question

我希望提供下载发票的链接，我首先将所有发票保存在一个数组中，当用户单击任何特定发票时，它将在浏览器中下载（使用索引号继续跟踪）。但是这样做我遇到了问题，因为文件没有保存并显示为 .html 格式，请提供任何建议

Snippet的代码

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 用于 console.log(allpdf)

in mysql invoice_document 保存为blob

在node.js 服务器端

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

问题是他们是Buffers，而不是Blobs：

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