4

I would like the HTML from a Google Apps Script form, to get two different styles, one for the body of the email and another for the PDF file.

Current code:

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());
}

For a more complete view of the application, refer to this other post of mine:

Google App Script setTimeout Function problem

In the to two sections following

it returns the Gmail basic style, through var = body

  • Showing the fields edited in the form:

    name: example name

    email: example email

    comment: example comment

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]});

while in the section following

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);

and this file 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>

it returns the page style from the page "PDF-page.html", through var = htmlBody

  • Showing the fields edited in the form:

    Dear example name example email

    Thanks for your interest, we'll get back to you shortly

    Kind Regards

    Web App

I know I edit the script like this:

from:

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

to:

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

and enable the script to make the PDF file from the templates document as follows:

//  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);

I get the result.

That is, I get separate control for building and formatting email / PDF

QUESTION:

So I wish I could control the style, formatting, and function separately

GmailApp.sendEmail

as an example: 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>

that for

PDF-page.html (that I already have)

<!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>

I hope I have clearly explained my problem, please ask me for further clarification.

Thanks in advance for your attention.

Solution!

Well I found the solution to my problem and thought I'd share it below. In order to serve two different Html files, one to create the emal file in Html and the other the Html PDF file, I used 2 HtmlServices, rewritten my script as follows:

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());
}

to serve the two distinct Html pages I changed the script as follows:

FROM

/*** FOR HTML EMAIL **/

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

TO

/*** 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();

FROM

//**** 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

TO

//**** 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]});

how to create the new HTML pages with their respective CSS style pages, here they are:

file 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>

file css-email-html

<style>

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

}


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

file 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>

file 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>

and this is the result:

sending email

enter image description here

the attached pdf file

enter image description here

Now I still have a problem, I can't see the "logo" image in the PDF file. If you want to help me in this, I will be able to. Thanks in advance.

Alan Wells
  • 30,746
  • 15
  • 104
  • 152
Dom
  • 443
  • 1
  • 5
  • 22
  • Mr. Tanaike. Thanks for the advice you gave me (you can get it using 2 HtmlServices) with this I solved .... As you can see I edited my post and applied the changes. Now I have this problem, I don't see the "logo" image in the PDF file, I tried to study your post: stackoverflow.com/questions/49244622/ but I can't integrate it (not successfully) into my script, if you can help me thanks – Dom Jan 13 '20 at 05:41
  • 1
    Thank you for replying. I understood that you wanted to create a PDF file with the images and CSS from HTML. So I proposed a modified script as an answer. Could you please confirm it? If I misunderstood your question and that was not the direction you want, I apologize. – Tanaike Jan 13 '20 at 05:43
  • Hi Mr. Tanaike. it's ok, you don't misunderstand. I solved it with your help (2 htmlService). I went ahead with the creation of my script and now I have a new problem: In the PDf file I don't see the image, I didn't depend on your advice but on my evolution of the script. – Dom Jan 13 '20 at 05:47
  • 1
    Thank you for replying. I apologize for the inconvenience. I could confirm that when I tested my answered script https://stackoverflow.com/a/59711113/7108653, the image is put to the PDF file. Unfortunately, I cannot replicate your situation. So can you provide your script for replicating your issue? By this, I would like to confirm it. – Tanaike Jan 13 '20 at 05:49
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205846/discussion-between-dom-and-tanaike). – Dom Jan 13 '20 at 06:39

1 Answers1

7
  • You want to create a PDF file with the images and CSS from HTML.
  • HTML for sending email has already been done.

I could understand your goal like above. If my understanding is correct, how about this answer? Please think of this as just one of several possible answers.

Modification points:

  • In order to put the image to the PDF file, the image is required to be put as the base64 data. Ref
    • In your script, cid:image is used in PDF-page.html. In this case, the image cannot be put to the PDF file.

Modified script:

When your script is modified, please modify as follows.

Google Apps Script side:

From: 
/*** 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);
To: 
/*** 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 side: PDF-page.html

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

Note:

  • It seems that text-pdf in your css-pdf.html is not used in PDF-page.html. From your bottom image, <p class="email-simply"> in PDF-page.html is <p class="text-pdf">?
  • By the way, I'm not sure whether all CSS styles can be used for this situation. I apologize for this.

References:

Tanaike
  • 181,128
  • 11
  • 97
  • 165