将 Google Apps Script (GAS) - Charts Service 图表传递给 GAS 中的 HTML 模板

Question

https://developers.google.com/apps-script/reference/charts

我只是想将 HTML 模板中的图表服务生成的图表对象（我选择的位置 - 不是作为附件，而是在模板中）传递给电子邮件。我已成功附加图表对象，但我想将其集成到电子邮件中 itself/embed

这是 Google Apps 脚本代码（也使用上面的 link 代码） ↓↓↓ */

var data = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, 'Month')
    .addColumn(Charts.ColumnType.NUMBER, 'In Store')
    .addColumn(Charts.ColumnType.NUMBER, 'Online')
    .addRow(['January', 10, 1])
    .addRow(['February', 12, 1])
    .addRow(['March', 20, 2])
    .addRow(['April', 25, 3])
    .addRow(['May', 30, 4])
    .build();

var chart = Charts.newAreaChart()
    .setDataTable(data)
    .setStacked()
    .setRange(0, 40)
    .setTitle('Sales per Month')
    .build();

var htmlOutput = HtmlService.createHtmlOutput().setTitle('My Chart').setWidth(1000).setHeight(1000);
var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
var imageUrl = "data:image/png;base64," + encodeURI(imageData);
htmlOutput.append("<div style=\"text-align: center\"><strong>I can generate the chart in a Modeless Dialog below here ↓↓↓<br><br>However, I'd like to place this chart within the HTML template file and send via email with Google Apps Script<br/></strong><br></div>");
htmlOutput.append("<div style=\"text-align: center\"> <img border=\"1\" src=\"" + imageUrl + "\"></div>");

var templ = HtmlService.createTemplateFromFile('html'); // HTML file to add 

var message = templ.evaluate().getContent()
var info = "I can generate the chart in this Modeless Dialog Box"
SpreadsheetApp.getUi().showModelessDialog(htmlOutput,info)


MailApp.sendEmail({
    to: "example@domain.com", ////////// <- input your email for testing
    subject: "Hello here are your highlights for today",
    htmlBody: message,
    // bcc: "example@domain.com",
    noReply:true
   });  
}

/////////////////////////////////////////////////////////////////////////////////

// Here is the HTML: ↓↓↓  

<!DOCTYPE html>
<HTML>
    <head>
    <base target="_top">
        <style type="text/css">
           div {
         text-align: center;
       }
        </style> 
    </head>
        <body>
            <h2>I would like the generated Chart below here in an email ↓↓↓:</h2>
            <p>
            I would like the generated Chart to be above here in an email ↑↑↑ 
            </p>   
        </body>
</html>```

Answer 1

遗憾的是，在目前阶段，Gmail 似乎无法直接将图像数据作为 URL。那么，在您的情况下，如何将图像显示为内联图像？当你的脚本被修改后，它变成如下。

修改后的脚本：

Google Apps 脚本端：

function sample() {
  var data = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, 'Month')
    .addColumn(Charts.ColumnType.NUMBER, 'In Store')
    .addColumn(Charts.ColumnType.NUMBER, 'Online')
    .addRow(['January', 10, 1])
    .addRow(['February', 12, 1])
    .addRow(['March', 20, 2])
    .addRow(['April', 25, 3])
    .addRow(['May', 30, 4])
    .build();
  var chart = Charts.newAreaChart()
    .setDataTable(data)
    .setStacked()
    .setRange(0, 40)
    .setTitle('Sales per Month')
    .build();
  var htmlOutput = HtmlService.createHtmlOutput().setTitle('My Chart').setWidth(1000).setHeight(1000);

  var blob = chart.getAs('image/png'); // Added
  var imageData = Utilities.base64Encode(blob.getBytes()); // Modified

  var imageUrl = "data:image/png;base64," + encodeURI(imageData);
  htmlOutput.append("<div style=\"text-align: center\"><strong>I can generate the chart in a Modeless Dialog below here ↓↓↓<br><br>However, I'd like to place this chart within the HTML template file and send via email with Google Apps Script<br/></strong><br></div>");
  htmlOutput.append("<div style=\"text-align: center\"> <img border=\"1\" src=\"" + imageUrl + "\"></div>");
  var templ = HtmlService.createTemplateFromFile('html'); // HTML file to add 
  var message = templ.evaluate().getContent();
  var info = "I can generate the chart in this Modeless Dialog Box"
  SpreadsheetApp.getUi().showModelessDialog(htmlOutput, info);
  MailApp.sendEmail({
    to: "example@domain.com", ////////// <- input your email for testing
    subject: "Hello here are your highlights for today",
    htmlBody: message,
    // bcc: "example@domain.com",
    noReply: true,

    inlineImages: {sampleImage: blob} // Added

  });
}

HTML 边:

<!DOCTYPE html>
<HTML>

<head>
  <base target="_top">
  <style type="text/css">
    div {
      text-align: center;
    }
  </style>
</head>

<body>
  <h2>I would like the generated Chart below here in an email ↓↓↓:</h2>

  <img src="cid:sampleImage"> <!-- added -->

  <p>
    I would like the generated Chart to be above here in an email ↑↑↑
  </p>
</body>
</html>

参考：

sendEmail(message)

将 Google Apps Script (GAS) - Charts Service 图表传递给 GAS 中的 HTML 模板

Pass Google Apps Script (GAS) - Charts Service chart to HTML Template within GAS

javascript

gmail

google-sheets

google-apps-script

修改后的脚本：

Google Apps 脚本端：

HTML 边:

参考：