如何從動態 HTML 生成 PDF 並將其上傳到 AWS S3 存儲桶而不下載 pdf？

Question

我們在 React JS 中開發了 web 應用程序。 在我嘗試生成 pdf 的地方，而不是下載或打開新 window 中的 pdf，我想將其直接上傳到 AWS S3 存儲桶中。 研究並嘗試了樣本沒有得到我想要的解決方案。 一些示例正在下載 pdf 或在打印視圖/新選項卡中打開它。

那么，如何從動態 html 生成 PDF 並將其直接上傳到 s3。

謝謝你

Answer 1

 // pdfTemplate.html create this file and paste bellow html code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Generate PDF from dynamic HTML and upload it to AWS S3</title>
    <style>
      .invoice-box { max-width: 800px; margin: auto; padding: 30px;        font-size: 16px;line-height: 24px;font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;color: #555;      }      .invoice-box table {        width: 100%;        line-height: inherit;        text-align: left;      }      .invoice-box table td {        padding: 5px;        vertical-align: top;      }      .invoice-box table tr td:nth-child(2) {        text-align: left;      }      .invoice-box table tr.top table td {        padding-bottom: 20px;      }      .invoice-box table tr.top td.title {        font-size: 45px;        line-height: 45px;        color: #333;      }      .invoice-box table tr.information td.title-text{        font-weight: 700;        text-align: center;      }      .invoice-box table tr.information table td {        padding-bottom: 40px;      }      .invoice-box table tr.heading td {        background: #eee;        border-bottom: 1px solid #ddd;        font-weight: bold;      }      .invoice-box table tr.details td {        padding-bottom: 20px;      }      .invoice-box table tr.item td {        border-bottom: 1px solid #eee;      }      .invoice-box table tr.item.last td {        border-bottom: none;      }      .invoice-box table tr.total td:nth-child(2) {        border-top: 2px solid #eee;        font-weight: bold;      }      .invoice-box table tr.sub-total td:nth-child(n) {        border-top: 5px solid #eee;        text-align: right;        font-weight: 700;      }      .logo > img{        width: 100%;         max-width: 300px;        text-align:center;      }      .description {        font-weight: 700;        text-align: center;      }      @media only screen and (max-width: 600px) {        .invoice-box table tr.top table td {          width: 100%;          display: block;          text-align: center;        }        .invoice-box table tr.information table td {          width: 100%;          display: block;          text-align: center;        }      }      /** RTL **/      .invoice-box.rtl {        direction: rtl;        font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;      }      .invoice-box.rtl table {        text-align: right;      }      .invoice-box.rtl table tr td:nth-child(2) {        text-align: left;      }
    </style>
  </head>

  <body>
    <div class="invoice-box">
      <div class="logo"><img src="logo.png" alt="demoProject"/></div>
      <div class="description">
        <p> Product Purchase Summery</p>
      </div>
      <table cellpadding="0" cellspacing="0">
        <tr class="heading">
          <td>User Name</td>
          <td>Product Name</td>
          <td>Price</td>
        </tr>
      </table>
    </div>
  </body>
</html>
     
    // *******************************************************
    // ************** Nodejs code start here *****************


     const browser = await puppeteer.launch({
                    headless: true,
                    args: ["--no-sandbox"],
               //     executablePath: "/usr/bin/chromium-browser"
                });

                // create a new page
    const page = await browser.newPage();


    let readFile = fs.readFileSync(path.join(__dirname, "/../views/pdfTemplate.html"), "utf8"); // 

    await page.setContent(readFile, {
        waitUntil: "domcontentloaded"
    });

    // create a pdf buffer
    const pdfBuffer = await page.pdf({
        format: "A4"
    });

     let folder = "userTransaction"; // s3 bucket folder name
     let sendData = [s3key, folder];

    commonFile.uploadPdfFile(pdfBuffer, sendData, async function (error, ganararedFileName) {
        if (error) {
            throw new Error(error);
        } else {
            let formatted = readFile.replace(tdString, "<tr class='item'></tr>");
            fs.writeFileSync(path.join(__dirname, "/../views/pdfTemplate.html"), formatted, "utf8");
            res.status(200).send({
                status: "1",
                message: "Pdf generated",
                data: ganararedFileName,
            });
        }
    });
    
    // ***************  Nodejs code end here *****************
    // *******************************************************

    // *******************************************************
    // in common file created function : uploadPdfFile
    // *********** Start ************************************


    const uploadPdfFile = function (bufferData, getData, callBack) {
    const key = getData[0];
    const folder = getData[1];
    const file = + Date.now().toString();
    const params = {
      Bucket: bucketName,
      Key: (key + folder + file),
      ACL: "public-read",
      ContentType: "application/pdf",
      Body: bufferData
    };
    s3.upload(params, function (err, data) {
      if (err) {
        callBack(err, null);
      } else {
        callBack(null, data);
      }
    });
  };

module.exports = {
  uploadPdfFile: uploadPdfFile,
  
};
// *********** ENd ************************************
// in common file created function : uploadPdfFile
// *******************************************************

如何從動態 HTML 生成 PDF 並將其上傳到 AWS S3 存儲桶而不下載 pdf？

問題描述

1 個解決方案

解決方案1
0 2022-07-29 12:02:37

如何從動態 HTML 生成 PDF 並將其上傳到 AWS S3 存儲桶而不下載 pdf？

問題描述

1 個解決方案

解決方案1 0 2022-07-29 12:02:37

解決方案1
0 2022-07-29 12:02:37