Google Apps 脚本 - 将带有样式的 HTML 转换为 PDF 并附加到电子邮件 - 从 HTML 创建 PDF blob
Dom*_*Dom 4 html javascript css pdf google-apps-script
我想要 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());
}有关应用程序的更完整视图，请参阅我的另一篇文章：
Google App Script setTimeout 函数问题
在以下两节中
它通过var = body返回 Gmail 基本样式
显示表单中编辑的字段：
名称：示例名称
电子邮件：示例电子邮件
评论：示例评论
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 的构建和格式设置
问题：
所以我希望我可以分别控制样式、格式和功能
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>我希望我已经清楚地解释了我的问题，请要求我进一步澄清。
预先感谢您的关注。
解决方案！
好吧，我找到了问题的解决方案，并想在下面分享。为了提供两个不同的 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-电子邮件-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数据放入。参考
- 在您的脚本中，
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-pdfin yourcss-pdf.html没有使用 inPDF-page.html。从你的底部图像，<p class="email-simply">在PDF-page.html是<p class="text-pdf">？ - 顺便说一句，我不确定是否所有 CSS 样式都可以用于这种情况。我为此道歉。
参考：
| 归档时间： |
|
| 查看次数： |
1850 次 |
| 最近记录： |