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 无法正常工作

css - 如何调整 Firefox 附加 SDK 弹出窗口/面板的大小？ Firefox 附加 SDK 弹出窗口/面板太小
我关注了 tutorial on creating a popup for an add-on在 Firefox 中，效果很好。我现在遇到的问题是它创建的弹出窗口不会更改大小以适应我添加到其中的内容
覆盖后的FFmpeg concat(附加)
我有一些视频，我需要连接一个标题并添加一些覆盖，问题是我需要先做覆盖，否则时间不正确，然后才将标题连接到视频的开头 ffmpeg -i talk.mp4 -i start_pancarte.png
Powershell 附加 CSV
我正在尝试附加一个 CSV 文件。这是我正在使用的线路。不幸的是，我找不到 export-csv 的附加选项。任何想法都有助于使其发挥作用。 Get-ADGroupMember "Domain Adm
Java 附加 API
我正在努力理解 Attach API (com.sun.tools.attach.*) 的用途。它的典型用途是什么？它是为了“模拟”JVM，以便您可以在不部署/启动代码的情况下测试您的代码吗？它是一个
python - BeautifulSoup 附加
我不明白为什么这不起作用。 soup_main = BeautifulSoup('FooBar') soup_append = BeautifulSoup('Meh') soup_main.body.
php - 附加 where 子句
我有以下代码来返回我想要的字符串 $sql = " SELECT `description` FROM `auctions` WHERE `description` REGEX
Javascript 附加 - 使用数组中的值附加多个元素
我正在尝试从数组中附加具有多个值的元素，但我做错了。这是我的代码: for(var i=0; i ` + pricesArray[i].start_date ` ` + pricesArray[i
附加 Javascript 图像吗？
我正在尝试将图像链接添加到此 javascript 附加表中。使图像位于按钮上方这是代码 $("#1").append(""+section+""+no+""+price+""+button+""
Javascript 附加 + 单击删除它们
我有一个问题，我已经解决了，但它太烦人了。我有一个 js 代码，当使用“追加”按下按钮时，它会放下一些 html 代码，并且通过该代码，我为 x 按钮提供了一个 id，并为容器元素提供了一个 id。
go - “附加”的工作方式是什么？
我想逐行读取文件，并且每一行可能都有很多字符。这个版本的readline效果很好 func readLine(r *bufio.Reader) ([]byte, error) { var (
php - 在文本文件中创建或写入/附加
我有一个网站，每次用户登录或注销时，我都会将其保存到文本文件中。如果不存在，我的代码在附加数据或创建文本文件时不起作用。这是示例代码 $myfile = fopen("logs.txt", "wr"
reactjs - typescript 附加 Prop
我正在尝试使用 typescript 和 Formik 创建一个自定义输入字段。我可以就完成以下代码的最佳方式获得一些帮助吗？我需要添加额外的 Prop 标签和名称......我已经坚持了一段时间，希
jQuery 附加 html 与附加现有元素
我有一个字符串 big_html，我想将它添加到某个 div 中。我观察到以下方面的性能差异: $('#some-div').append( big_html ); // takes about 10
json - FormData 附加 JSON
如何使用 FormData 创建以下结果 ------WebKitFormBoundaryOmz20xyMCkE27rN7 Content-Disposition: form-data; name="
jquery - 附加 jQuery 事件处理程序以便首先触发它们
有没有办法附加 jQuery 事件处理程序，以便在任何先前附加的事件处理程序之前触发该处理程序？我遇到了this article ，但代码不起作用，因为事件处理程序不再存储在数组中，而这正是他的代码所
iphone - 附加 XCode 调试器
我正在开发一个需要网络登录的 iPhone 应用程序。像往常一样我打电话 [[UIApplication sharedApplication] openURL:loginURL]; 这将关闭应用程序并
firefox-addon - 如何制作仅可用于特定站点的Firefox扩展(附加)？
我想开发一个仅针对特定域激活的扩展。我不希望它在不浏览此特定域时出现在浏览器菜单中。有可能这样做吗？最佳答案可能：对于菜单，您可以添加一个弹出窗口侦听器，用于检查当前加载的URL（docs f
javascript - 附加 cookie 的新值
这段 JavaScript 代码 function writeCookie(CookieName, CookieValue, CookieDuration) { var expiration
javascript - jQuery 附加 Handlebars
我正在使用 Handlebars 来渲染使用ajax从本地服务器获得的信息。我的 HTML 看起来像: {{#each Tabs}}
javascript - 附加 html 后欧芹不起作用
我尝试了以下代码，但当输入框中没有数据时它不会通知。当我直接添加此内容(不附加)时，它会起作用。我在这里做错了什么 var output = "\n"+ "\n"+

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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