首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何从动态HTML生成PDF,并将其上传到AWS S3桶而无需下载pdf?

如何从动态HTML生成PDF,并将其上传到AWS S3桶而无需下载pdf?
EN

Stack Overflow用户
提问于 2022-01-28 05:08:18
回答 1查看 387关注 0票数 1

我们在React中开发了web应用程序。在这里,我试图生成pdf,而不是下载或打开新窗口中的pdf,我想直接上传到AWS的S3桶。研究并尝试了没有得到我想要的溶液的样品。一些示例正在下载pdf或在打印视图/新选项卡中打开它。

因此,如何从动态html生成PDF并将其直接上传到s3。

谢谢

EN

回答 1

Stack Overflow用户

发布于 2022-07-29 12:02:37

代码语言:javascript
代码运行次数:0
运行
复制
 // 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
// *******************************************************
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70889057

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档