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

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

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

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

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

谢谢

EN

回答 1

Stack Overflow用户

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 // 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

复制
相关文章
用递归来实现字符串逆序输出
题目:用递归来实现字符串逆序输出 源代码: #include #include void view_str(char *p, int start, int end) { if (start >= end) return; else { char t; t = p[start]; p[start] = p[end]; p[end] = t; view_str(p, start + 1, end - 1); } } main() { int start=0, end; char str[80]; print
企鹅号小编
2018/01/03
8620
用递归来实现字符串逆序输出
BASH输出着色显示
通过将其输出着色,可以使BASH脚本更漂亮。使用ANSI转义序列设置文本属性,例如前景色和背景色。
用户1679793
2019/12/11
1.6K0
BASH输出着色显示
my php & mysql FAQ
php中文字符串长度及定长截取问题使用str_len("中国") 结果为6,php系统默认一个中文字符长度为3,可改用mb_strlen函数获得长度,mb_substr函数截取字符 mb_strlen($str, "utf-8"); //1汉字为1字符 mb_strlen($str, "gb2312"); //系统会认为1汉字为2字符 mb_strlen($str); //如果没有添加,系统会认为1汉字为3字符 int mb_strlen ( string str [, string encoding]
架构师刀哥
2018/03/20
2.4K0
4步让你驱动Kubernetes【Containers】
在本系列的第三篇文章中,我介绍了Kubernetes的基础知识:首先学习如何驱动,我强调您应该学会驱动Kubernetes,而不是构建它。我还解释了在Kubernetes中为应用程序建模必须学习的基本元素是最少的。我想强调这一点:您需要学习的原语集是您可以学习的最简单的原语集,以实现生产质量的应用程序部署(即高可用性[HA],多个容器,多个应用程序)。换句话说,学习Kubernetes内置的一组原语比学习集群软件,集群文件系统,负载平衡器,疯狂的Apache配置,疯狂的Nginx配置,路由器,交换机,防火墙和存储后端要容易得多,这一切您将需要在传统IT环境(用于虚拟机或裸机)中为简单的HA应用程序建模。
王欣壳
2019/11/12
1.5K0
4步让你驱动Kubernetes【Containers】
C++字符串结束的标志 | 用数组输出love
在上面的字符数组中,第5个字符为′\0 ′,就表明字符串的有效字符为其前面的4个字符。也就是说,遇到字符′\0′就表示字符串到此结束,由它前面的字符组成字符串,对一个字符串常量,系统会自动在所有字符的后面加一个′\0′作为结束符。
小林C语言
2020/12/04
1.2K0
C++字符串结束的标志 | 用数组输出love
如何用matlab输出论文级图片?
用matlab辛辛苦苦计算出来的数据结果,只可惜苦于无法输出一幅高质量的图片,不得不复制粘贴数据到其他绘图软件中绘制。之前在网上搜到一款叫export fig的图像工具箱,可惜效果也不胜理想。今天给大家介绍一个 matlab 自带的非常实用的图片输出命令 —— print 函数。
巴山学长
2019/07/15
3.1K0
如何用matlab输出论文级图片?
openshift/origin学习记录(5)——添加Template(模板)并基于模板部署应用
本文介绍了如何在Openshift平台上部署CakePHP应用,包括创建镜像、部署应用、查看日志和访问应用。首先,介绍了基于二进制文件的安装方法,然后通过官方提供的模板创建应用。最后,以Cakephp-mysql为例,介绍了部署应用的步骤。
胡了了
2017/12/28
2.7K0
openshift/origin学习记录(5)——添加Template(模板)并基于模板部署应用
字符串逆序输出
输入第一行是一个整数N(N<10)表示测试数据的组数) 每组测试数据占一行,每行数据中间有且只有一个空格(这样你可以把此行当成两个字符串读取)。 每行字符长度不超过40 并且保证输入的字符只有空格(1个),数字,小写字母三种输出对应每行测试数据,逆序输出(空格和数字不输出)样例输入
书童小二
2018/09/03
1.1K0
左右用R右手Python系列——字符串格式化输出
学习Python不到一个月,虽然学的很渣,但是还是想通过这种途径分享自己的学习心得,毕竟当初学习R语言也是这么走过来的。 今天是R语言与Python综合系列的第一篇,就聊一聊两者在常用字符串输出上的差异。 为了方便统一案例图片的风格,今天统一在jupyter编辑器中编辑(R和Python)。 通常在R语言中我们使用最多的关于字符串输出函数是paste和paste0。 这两着之间的差别非常微小,如同其字面意思一样,前者可以自定义字符串间隔符号,后者则默认没有间隔符号。 paste和paste0都可以完成单个向
数据小磨坊
2018/04/11
1.6K0
左右用R右手Python系列——字符串格式化输出
1228|如何用ALV输出完成SAP报表
20201228学习《ABAP_ALV_知识整理》,以下为读书笔记和我的ALV开发实例。
不会写代码的杰尼
2022/05/19
1.3K0
1228|如何用ALV输出完成SAP报表
理论有何用?不问“何用”,先问“用否”!
    昨天准备写点东西,把原来同事的代码拿过来看看,这位同事有数年大型国企、数年知名外企工作经验,而且“案头”常放一部厚案头的“设计模式”方面的书,但我之前从未和他一起写过程序,在看之前我一直在想他写的程序应该非常不错吧,但是打开他的解决方案,看到项目里面很多都是一个文件里面写完了所有的功能,一个函数写了很多功能,其中一个函数里面写了很多的嵌套的 if(..){...}else{...},看得人眼花缭乱,如果不认识他的人看了这些代码,一定认为这是一个新手写的!     想起同事以前偶尔说的OOP(面向
用户1177503
2018/02/26
6380
c语言字符串转换为整型_c语言输出负数用什么
注意:整型变量与字符变量相加减是使用ASCII码值,可以通过类型转换或格式字符来控制打印。
全栈程序员站长
2022/11/02
2.2K0
05:输出亲朋字符串
05:输出亲朋字符串 总时间限制: 1000ms 内存限制: 65536kB描述 编写程序,求给定字符串s的亲朋字符串s1。  亲朋字符串s1定义如下:给定字符串s的第一个字符的ASCII值加第二个字符的ASCII值,得到第一个亲朋字符; 给定字符串s的第二个字符的ASCII值加第三个字符的ASCII值,得到第二个亲朋字符;依此类推,直到给定字符串s的倒数第二个字符。亲朋字符串的最 后一个字符由给定字符串s的最后一个字符ASCII值加s的第一个字符的ASCII值。 输入输入一行,一个长度大于等于2,
attack
2018/04/03
2.3K0
用 React 分页显示数据用react分页显示数据
展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton
一个会写诗的程序员
2018/08/17
2.9K0
用 React 分页显示数据用react分页显示数据
将若干字符串按字母顺序(由小到大)输出(用指针)
#include <stdio.h> #include <stdlib.h> #include <string.h> void sortt(char *name[],int n) { int i,j; char *temp; for(i=0;i<5;i++) { for(j=i+1;j<5;j++) { if(strcmp(name[i],name[j])>0) /** 设这两个字符串为
谙忆
2021/01/19
1.1K0
Python|输出指定字符串
输入一串字符,由字母、数字和空格组成,长度< 1000,判断其中是否存在日期格式的数据。日期格式的数据具有如下的特征,连续包含年份和月份信息。年份信息是指连续的四个数字,之后是Jan, Feb, Mar,Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec这些字符串之一,如”2019Nov" 就是符合日期格式要求的数据。
算法与编程之美
2020/02/21
1.3K0
手把手教你如何用黑白显示器显示彩色!
原来在黑白显示器上也能显示出彩色啊!通过在监视器上覆盖拜耳滤色镜,并拼接彩色图像,就能在黑白监视器上显示彩色图像。
大数据文摘
2020/07/06
9980
如何用C语言输出杨辉三角
题目描述:还记得中学时候学过的杨辉三角吗?具体的定义这里不再描述,你可以参考以下的图形:
小Bob来啦
2020/12/16
1.3K0
如何用C语言输出杨辉三角
扩展CakePHP的CacheHelper以使用缓存引擎
CakePHP是一个MVC设计模式下的PHP框架,它使得您的生活更加简单并且让您的开发工作更上一层楼。尽管它被认为是一个相对缓慢的框架,(因为)它带有的大量缓存引擎(例如: FileCache, ApcCache, Wincache, XcacheEngine, MemcacheEngine 以及 RedisEngine等缓存引擎系统)能够帮助您提高您的网页加载或者PHP应用速度。
Noah____________________
2018/02/02
3.2K0
扩展CakePHP的CacheHelper以使用缓存引擎
字符串格式化输出
输出的字符串是给人看的,于是就需要有各种样式,弄得好看一些——子曰:“已矣乎!吾未见好德如好色者也。”——表面功夫必须要做。
老齐
2021/07/05
9700

相似问题

如何用角度显示PHP MySQL查询的输出

11

如何用MySQL格式编写CakePHP查询?

23

如何用cakePHP显示错误表单?

13

MySQL输出屏蔽(如电话号码、SSN等显示格式)

31

用MySQL查询CakePHP的日期

46
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文