如何从动态HTML生成PDF，并将其上传到AWS S3桶而无需下载pdf？
如何从动态HTML生成PDF，并将其上传到AWS S3桶而无需下载pdf？
提问于 2022-01-28 05:08:18
我们在React中开发了web应用程序。在这里，我试图生成pdf，而不是下载或打开新窗口中的pdf，我想直接上传到AWS的S3桶。研究并尝试了没有得到我想要的溶液的样品。一些示例正在下载pdf或在打印视图/新选项卡中打开它。
因此，如何从动态html生成PDF并将其直接上传到s3。
谢谢
回答 1
Stack Overflow用户
发布于 2022-07-29 12:02:37
// 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
// *******************************************************页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70889057
复制相关文章
相似问题
腾讯云开发者
