javascript - Google Apps 脚本 - 将带有样式的 HTML 转换为 PDF 并附加到电子邮件

javascript - Google Apps 脚本 - 将带有样式的 HTML 转换为 PDF 并附加到电子邮件 - 从 HTML 创建 PDF Blob

转载作者：行者123 更新时间：2023-12-02 02:43:46

我想要来自 Google Apps 脚本表单的 HTML，以获得两种不同的样式，一种用于电子邮件正文，另一种用于 PDF 文件。

当前代码:

function doGet(request) {
  return HtmlService.createTemplateFromFile('index')
      .evaluate();//not all caps but it has to match the name of the file and it doesn't - Change to PAGE
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}


/****** SHEET ****/
function userClicked(userInfo){
    var url = "https://docs.google.com/spreadsheets/your-sheet-ID";
    var ss = SpreadsheetApp.openByUrl(url);
    var ws = ss.getSheetByName("Data");
    ws.appendRow([userInfo.name, userInfo.email, userInfo.comment, new Date()]);

}


function submitData(form) {
  var subject='New Feedback';
  var body=Utilities.formatString('name: %s <br />email: %s<br />Comment: %s', form.name,form.email,form.comment);
  
/*** FOR HTML EMAIL **/

    var htmlTemplate = HtmlService.createTemplateFromFile("PDF-page.html");
    htmlTemplate.name = form.name;
    htmlTemplate.email = form.email;
    var htmlBody = htmlTemplate.evaluate().getContent();

/*** CREATE PDF ***/
  
  var folderId = "your-folder-ID"; // Please set the folder ID.  // Added
  var blob = Utilities.newBlob(htmlBody, MimeType.HTML, form.name).getAs(MimeType.PDF);  // Added - PDF from html email - coment line for serve PDF from document template 
  var file = DriveApp.getFolderById(folderId).createFile(blob);  // Added

//****email****//  
  var aliases = GmailApp.getAliases()
   Logger.log(aliases); //returns the list of aliases you own
   Logger.log(aliases[0]); //returns the alias located at position 0 of the aliases array

  GmailApp.sendEmail('your-email@email.email','New registration from:', 'object', {'from': aliases[0],subject: subject, htmlBody: body, attachments: [blob]});  // Modified
  
  
  return Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s<br />PDF: <a target="_blank" href="%s">see your PDF file</a>', form.name,form.email,form.comment,file.getUrl());
}

有关该应用程序的更完整 View ，请参阅我的另一篇文章:

Google App Script setTimeout Function problem

在以下两节中

它返回 Gmail 基本样式，通过 var = 正文

显示在表单中编辑的字段:

名称:示例名称

电子邮件:示例电子邮件

评论:示例评论

var body=Utilities.formatString('name: %s <br />email: %s<br />Comment: %s', form.name,form.email,form.comment);

/****************************************************************************/

GmailApp.sendEmail('your-email@email.email','New registration from:', 'object', {'from': aliases[0],subject: subject, htmlBody: body, attachments: [blob]});

在以下部分中

var htmlTemplate = HtmlService.createTemplateFromFile("PDF-page.html");
    htmlTemplate.name = form.name;
    htmlTemplate.email = form.email;
    var htmlBody = htmlTemplate.evaluate().getContent();

/*** CREATE PDF ***/
  
  var folderId = "your-folder-ID"; // Please set the folder ID.  // Added

  var blob = Utilities.newBlob(htmlBody, MimeType.HTML, form.name).getAs(MimeType.PDF);

和这个文件 PDF-page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top"> 
  </head>
  <body>
    <p>Dear <?= name ?> <?= email ?>,</p>
    <p>Thanks for your interest, we'll get back to you shortly</p>
    <p>Kind Regards,<br>Web App</p>

  </body>
</html>

它通过 var = htmlBody 从页面“PDF-page.html”返回页面样式

显示在表单中编辑的字段:

亲爱的示例名称示例电子邮件

感谢您的关注，我们会尽快回复您

亲切的问候

网络应用

我知道我像这样编辑脚本:

从:

GmailApp.sendEmail('your-email@email.email','New registration from:', 'object', {'from': aliases[0],subject: subject, htmlBody: body, attachments: [blob]});

至:

GmailApp.sendEmail('your-email@email.email','New registration from:', 'object', {'from': aliases[0],subject: subject, htmlBody: HtmlBody, attachments: [blob]});

并启用脚本从模板文档制作 PDF 文件，如下所示:

//  PDF FROM DOCUMENT TEMPLATE //  
  var templateDocumentId = "your-document-ID"; // Please set the file ID of the template Google Document
  var docId = DriveApp.getFileById(templateDocumentId).makeCopy("temp").getId();
  var doc = DocumentApp.openById(docId);
  doc.getBody().replaceText("{{name}}", form.name).replaceText("{{email}}", form.email).replaceText("{{comment}}", form.comment); // Modified
  doc.saveAndClose();
  var blob = doc.getBlob().setName(form.name);
  DriveApp.getFileById(docId).setTrashed(true);


//  var blob = Utilities.newBlob(htmlBody, MimeType.HTML, form.name).getAs(MimeType.PDF);

我得到结果。

也就是说，我可以单独控制构建和格式化电子邮件/PDF

QUESTION:

所以我希望我可以分别控制样式、格式和功能

GmailApp.sendEmail

例如:email-page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top"> 
  </head>
  <body>
    <p>Name: <?= name ?> <?= email ?>,</p>
    <p>Email. <?= email ?>,</p>
    <p>Comment<?= comment ?>,</p>
    <p>This is email page</p>


  </body>
</html>

那是为了

PDF-page.html(我已经拥有)

<!DOCTYPE html>
<html>
  <head>
    <base target="_top"> 
  </head>
  <body>
    <p>Dear <?= name ?> <?= email ?>,</p>
    <p>Thanks for your interest, we'll get back to you shortly</p>
    <p>Kind Regards,<br>Web App</p>

  </body>
</html>

我希望我已经清楚地解释了我的问题，请要求我进一步澄清。

提前感谢您的关注。

Solution!

好吧，我找到了解决问题的方法，并认为我会在下面分享。为了提供两个不同的 Html 文件，一个在 Html 中创建 emal 文件，另一个是 Html PDF 文件，我使用了 2 个 HtmlServices，将我的脚本重写如下:

function doGet(request) {
  return HtmlService.createTemplateFromFile('index')
      .evaluate();//not all caps but it has to match the name of the file and it doesn't - Change to PAGE
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}



function userClicked(userInfo){
    var url = "https://docs.google.com/spreadsheets/d/your-spreadsheet-ID";
    var ss = SpreadsheetApp.openByUrl(url);
    var ws = ss.getSheetByName("Data");
    ws.appendRow([userInfo.name, userInfo.email, userInfo.comment, new Date()]);

}


function submitData(form) {
  var subject='New Feedback';
  var body = Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);

/*** FOR HTML PDF **/
  var htmlTemplate = HtmlService.createTemplateFromFile("PDF-page.html");
    htmlTemplate.name = form.name;
    htmlTemplate.email = form.email;
    var pdf_html = htmlTemplate.evaluate().getContent();

/*** FOR HTML EMAIL **/ 
  //image logo in email html from my google drive acount
  var ImageBlob = DriveApp
                      .getFileById('your-image-ID') //change from your image-ID google drive acount
                      .getBlob()
                      .setName("ImageBlob");    
  var htmlTemplate = HtmlService.createTemplateFromFile("EMAIL-page.html");
    htmlTemplate.name = form.name;
    htmlTemplate.email = form.email;
    var email_html = htmlTemplate.evaluate().getContent();


/*** CREATE PDF ***/

  var folderId = "your-folder-ID"; // Please set the folder ID
  var blob = Utilities.newBlob(pdf_html, MimeType.HTML, form.name).getAs(MimeType.PDF); 
  var file = DriveApp.getFolderById(folderId).createFile(blob);

//**** send email ****//  
  var aliases = GmailApp.getAliases()
   Logger.log(aliases); //returns the list of aliases you own
   Logger.log(aliases[0]); //returns the alias located at position 0 of the aliases array
   var userName = form.name;
  GmailApp.sendEmail('my-email@email.email','New Registration from:  ' +userName, '', {'from': aliases[0], htmlBody: email_html, inlineImages: {image: ImageBlob}, attachments: [blob]});


  return Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s<br />PDF: <a target="_blank" href="%s">see your PDF file</a>', form.name,form.email,form.comment,file.getUrl());
}

为了提供两个不同的 Html 页面，我将脚本更改如下:

从

/*** FOR HTML EMAIL **/

    var htmlTemplate = HtmlService.createTemplateFromFile("PDF-page.html");
    htmlTemplate.name = form.name;
    htmlTemplate.email = form.email;
    var htmlBody = htmlTemplate.evaluate().getContent();

至

/*** FOR HTML PDF **/
  var htmlTemplate = HtmlService.createTemplateFromFile("PDF-page.html");
    htmlTemplate.name = form.name;
    htmlTemplate.email = form.email;
    var pdf_html = htmlTemplate.evaluate().getContent();

/*** FOR HTML EMAIL **/ 
  //image logo in email html from my google drive acount
  var ImageBlob = DriveApp
                      .getFileById('your-image-ID') //change from your image-ID google drive acount
                      .getBlob()
                      .setName("ImageBlob");    
  var htmlTemplate = HtmlService.createTemplateFromFile("EMAIL-page.html");
    htmlTemplate.name = form.name;
    htmlTemplate.email = form.email;
    var email_html = htmlTemplate.evaluate().getContent();

从

//**** send email ****//  
  var aliases = GmailApp.getAliases()
   Logger.log(aliases); //returns the list of aliases you own
   Logger.log(aliases[0]); //returns the alias located at position 0 of the aliases array
   var userName = form.name;
GmailApp.sendEmail('your-email@email.email','New registration from:', 'object', {'from': aliases[0],subject: subject, htmlBody: body, attachments: [blob]});  // Modified

至

//**** send email ****//  
  var aliases = GmailApp.getAliases()
   Logger.log(aliases); //returns the list of aliases you own
   Logger.log(aliases[0]); //returns the alias located at position 0 of the aliases array
   var userName = form.name;
  GmailApp.sendEmail('my-email@email.email','New Registration from:  ' +userName, '', {'from': aliases[0], htmlBody: email_html, inlineImages: {image: ImageBlob}, attachments: [blob]});

如何使用各自的 CSS 样式页面创建新的 HTML 页面，它们是:

文件 EMAIL-Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
<?!= include("css-email");?>
  </head>
  <body>
<p class="image-logo"><img src='cid:image' width="150" height="56"></p>
   <h2 class="title-email">EMAIL Template HTML,</h2>
    <p class="text-email">Dear <?= name ?> <?= email ?>,</p>
    <p class="text-email">Thanks for your interest, we'll get back to you shortly</p>
    <p class="text-email">Kind Regards,<br>Web App</p>

  </body>
</html>

文件 css-email-html

<style>

.title-email {
  text-left: center;
  margin-right: 550px;
  background-color: aliceblue;

}


.text-email {
  color: #3b9f04;
}

文件 PDF-page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
<?!= include("css-pdf");?>
  </head>
  <body>
  <p class="image-logo"><img src='cid:image' width="150" height="56"></p>
  <h2 class="title-pdf">PDF Template HTML,</h2>
    <p class="text-pdf">Name: <?= name ?></p>
    <p class="text-pdf">Email: <?= email ?>,</p>
<table>
  <tr>
    <th>Table not inclued in EMAIL Html file</th>
  </tr>
  <tr>
    <td>Field not inclued in EMAIL Html file</td>
  </tr>
</table>

  </body>
</html>

文件 css-pdf.html

<style>

.title-pdf {
  text-align: center;
  margin-right: 50px;
  background-color: antiquewhite;

}


.text-pdf {
  color: red;
}

table {
  border-collapse: collapse;
  padding: 5px
}

table, th, td {
  border: 1px solid black;
  padding: 8px;
}


</style>

这是结果:

发送电子邮件

附件 pdf 文件

现在我仍然有一个问题，我在 PDF 文件中看不到“ Logo ”图像。
如果您想在这方面帮助我，我将能够。
提前致谢。

最佳答案

您想使用 HTML 中的图像和 CSS 创建 PDF 文件。

用于发送电子邮件的 HTML 已经完成。

我可以像上面那样理解你的目标。如果我的理解是正确的，这个答案怎么样？请认为这只是几个可能的答案之一。

修改点:

为了将图像放入 PDF 文件，需要将图像作为 base64 数据放入。 Ref

在您的脚本中，cid:image用于PDF-page.html .在这种情况下，无法将图像放入 PDF 文件。

修改后的脚本:

当您的脚本被修改时，请进行如下修改。

Google Apps 脚本方面:

从:

/*** FOR HTML PDF **/
  var htmlTemplate = HtmlService.createTemplateFromFile("PDF-page.html");
    htmlTemplate.name = form.name;
    htmlTemplate.email = form.email;
    var pdf_html = htmlTemplate.evaluate().getContent();

/*** CREATE PDF ***/

  var folderId = "your-folder-ID"; // Please set the folder ID
  var blob = Utilities.newBlob(pdf_html, MimeType.HTML, form.name).getAs(MimeType.PDF); 
  var file = DriveApp.getFolderById(folderId).createFile(blob);

至:

/*** FOR HTML PDF **/
var htmlTemplate = HtmlService.createTemplateFromFile("PDF-page.html");
htmlTemplate.name = form.name;
htmlTemplate.email = form.email;
var fileIdOfImageFile = "MY-IMAGE-ID";  // Added: Please set the file ID of the image file.
var imageBlob = DriveApp.getFileById(fileIdOfImageFile).getBlob();  // Added
htmlTemplate.imageData = imageBlob.getContentType() + ';base64,' + Utilities.base64Encode(imageBlob.getBytes());  // Added
var pdf_html = htmlTemplate.evaluate().getContent();

/*** CREATE PDF ***/
var folderId = "your-folder-ID";
var blob = Utilities.newBlob(pdf_html, MimeType.HTML, form.name).getAs(MimeType.PDF);
var file = DriveApp.getFolderById(folderId).createFile(blob);

HTML 端: PDF-page.html
从:

<p class="image-logo"><img src='cid:image' width="150" height="56"></p>

至:

<p class="image-logo"><img src="data:<?= imageData ?>" width="150" height="56" /></p>

笔记:

看来text-pdf在您的 css-pdf.html未用于 PDF-page.html .从您的底部图片中，<p class="email-simply">在 PDF-page.html是 <p class="text-pdf"> ?

顺便说一句，我不确定是否所有 CSS 样式都可以用于这种情况。我为此道歉。

引用:

How to display Base64 images in HTML?

Show images inside a pdf created with Gloogle Apps Script Blob

关于javascript - Google Apps 脚本 - 将带有样式的 HTML 转换为 PDF 并附加到电子邮件 - 从 HTML 创建 PDF Blob，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59690350/

文章推荐： ios - 安全区域和导航栏

文章推荐： java - 在为树数据结构创建树类时是否强制使类节点静态

文章推荐： mongodb展开嵌套在文档数组中的数组

文章推荐： oracle - WSO2 DAS 3.0.0 与 API Manager 1.9.0 无法正常工作

javascript - 带有 li & ul 的多级下拉列表，带有 PHP 数组循环，带有 CSS 和 jQuery
我想使用 li 和 ul 制作一个多级下拉列表，以便显示我博客中按年和月排序的所有文章。我希望我的下拉菜单看起来像 Google Blogspot 下拉菜单: 这是我的 CSS 和 HTML 代码 u
c++ - 带有 gmp 的代码块，带有 << 运算符和 mp*_class 的段错误
我在 Win 7 64 机器上将 CodeBlocks 与 gcc 4.7.2 和 gmp 5.0.5 结合使用。开始使用 gmpxx 后，我看到一个奇怪的段错误，它不会出现在 +、- 等运算符中，但
javascript - 带有 Tern 的 CodeMirror - 带有 Javascript Intellisense 的自定义 "Types"
我正在使用 tern 为使用 CodeMirror 运行的窗口提供一些增强的智能感知，它工作正常，但我遇到了一个问题，我想添加一些自定义“types”，可以这么说，这样下拉列表中它们旁边就有图标了。我
带有 PC 作为 USB 主机的 Android ADK，带有 libusb，批量传输错误
我正在尝试让我的 PC 成为 Android 2.3.4 设备的 USB 主机，以便能够在不需要实际“附件”的情况下开发 API。为此，我需要将 PC 设置为 USB 主机和“设备”(在我的例子中是运
php - 带有 IIS 的 ASP.NET VS 带有 Apache 的 PHP
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 9
apache - 带有 Apache/Tomcat 多个 DNS 的反向代理，带有 SSL 的单个 Web 应用程序
我在设置服务器方面几乎是个新手，但遇到了一个问题。我有一个 Ubuntu 16.04 VPS 并安装了 Apache2 和 Tomcat7。我正在为 SSL 使用 LetsEncrypt 和 Cert
google-maps - 如何有效地将 Google Maps API V2(带有 MapFragment、Google Map、Marker 等)用于使用 API V1(带有 MapView、GeoPoint 等)的旧应用程序，
我在一个基于谷歌地图的项目上工作了超过 6 个月。我使用的是 Google Maps API V1 及其开发人员 API key 。当我尝试发布应用程序时，我了解到 Google API V1 已被弃
带有@property的Python对象来听写
我是 Python 的新手，所以如果我对一些简单的事情感到困惑，请原谅。我有一个这样的对象: class myObject(object): def __init__(self):
带有#号的javascript对象变量
这个问题已经有答案了: How can I access object properties containing special characters? (2 个回答) 已关闭 9 年前。我正在尝
带有@media的纵向模式和陆地模式的CSS
我有下面的 CSS。我想要的是一种流体/液体(因为缺乏正确的术语)css。我正在为移动设备开发，当我改变模式时从纵向 View 到陆地 View ，我希望它流畅。现在的图像在陆地 View 中效
带有@语法的python装饰器参数
我正在尝试使用可以接受参数的缓存属性装饰器。我查看了这个实现:http://www.daniweb.com/software-development/python/code/217241/a-cac
带有-1作为第三个参数的python双冒号
这个问题在这里已经有了答案: Understanding slicing (36 个答案) 关闭 6 年前。以a = [1,2,3,4,5]为例。根据我的直觉，我认为 a[::-1] 与 a[0:
带有--where子句的mysqldump不起作用
mysqldump -t -u root -p mytestdb mytable --where=datetime LIKE '2014-09%' 这就是我正在做的事情，它会返回: mysqldum
python - 带有 while 循环的销售税计算器
我正在制作销售税计算器，除了总支付金额部分外，其他一切都正常。在我的程序中，我希望能够输入一个数字并获得该项目的税额我还希望能够获得支付的总金额，包括交易中的税金。到目前为止，我编写的代码完成了所有这
带有-hwaccel_output_format的FFMPEG Hwaccel错误
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许在 Stack Overflow 上提出有关通用计算硬件和软件的问题。您可以编辑问题，使其成为
带有 Airflow 的电子邮件
我是否必须进行任何额外的设置才能让 apache-airflow 在任务失败时向我发送电子邮件。我的配置文件中有以下内容(与默认值保持不变): [email] email_backend = airf
excel - 带有 $ 的内置字符串函数
这个问题在这里已经有了答案: What does the $ symbol do in VBA? (5 个回答) 3年前关闭。使用返回字符串(如 Left)的内置函数有什么区别吗？或使用与 $ 相同
.net - 带有.NET库的VB6
我有一个用VB6编写的应用程序，我需要使用一个用.NET编写的库。有什么方法可以在我的应用程序上使用该库吗？谢谢最佳答案这取决于。您可以控制.NET库吗？如果是这样，则可以修改您的库，以便可以
raku - 带有 ^ 的类方法名称没有被正确调用
当我创建一个以 ^ 开头的类方法时，我尝试调用它，它给了我一个错误。 class C { method ^test () { "Hi" } } dd C.new.test; Too m
带有 Material 设计的Angularjs无法实例化模块ngMaterial
我已经使用 bower 安装了 angularjs 和 materialjs。凉亭安装 Angular Material 并将“ngMaterial”注入(inject)我的应用程序，但出现此错误。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Google Apps 脚本 - 将带有样式的 HTML 转换为 PDF 并附加到电子邮件 - 从 HTML 创建 PDF Blob