将 Google Apps Script (GAS) - Charts Service 图表传递给 HTML 模板以在 GAS 中创建以创建无模式对话框

Question

用户：Tanaike 请在这里回答我的问题：

但是，我意识到我还想编辑我的模板并使用无模式对话框在发送电子邮件之前进行一些格式化；我发现在无模式对话框中预览我的工作很有帮助。

虽然我现在可以在电子邮件中发送图表，这很棒，但在尝试但没有成功之后，我意识到我不知道是否可以将图表图像传递到无模式对话框。我继续收到损坏的链接。

图表数据全部来自https://developers.google.com/apps-script/reference/charts

的样板代码

/////////////////////////////////// GAS代码.gs ↓↓↓

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'); 
  var imageData = Utilities.base64Encode(blob.getBytes()); 

  var imageUrl = "data:image/png;base64," + encodeURI(imageData);

  var templ = HtmlService.createTemplateFromFile('html'); // HTML template to add 
  var message = templ.evaluate().getContent();
  htmlOutput.append(message)
  var info = "I can generate the chart in this Modeless Dialog Box"
  SpreadsheetApp.getUi().showModelessDialog(htmlOutput, info); // this generates dialog
  
}

/////////////////////////////////// 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 modal dialog box↓↓↓:</h2>

  <img src="imageUrl"> <!-- ?????? This is my primary issue --> 

  <p>
    I would like the generated Chart to be above here in the modeless dialog box ↑↑↑
  </p>
</body>
</html>

Answer 1

很遗憾，message 的值不包括图像数据。那么，为了达到你的目的，不如修改如下。

修改后的脚本：

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');
  var imageData = Utilities.base64Encode(blob.getBytes());
  var imageUrl = "data:image/png;base64," + imageData;

  var templ = HtmlService.createTemplateFromFile('html'); // HTML template to add 
  var message = templ.evaluate().getContent();
  htmlOutput.append(message.replace("cid:sampleImage", imageUrl));

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

  // If you want to send an email. You can use the following script.
  // MailApp.sendEmail({to: "###", subject: "###", htmlBody: message, inlineImages: { sampleImage: blob }});
}

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 modal dialog box↓↓↓:</h2>

  <img src="cid:sampleImage">

  <p>
    I would like the generated Chart to be above here in the modeless dialog box ↑↑↑
  </p>
</body>
</html>

在这个修改中，当一个对话框被打开时，cid:sampleImage被替换为imageUrl的数据。并且，发送电子邮件时，使用 cid:sampleImage。即，对话框和电子邮件的图像数据被替换。

将 Google Apps Script (GAS) - Charts Service 图表传递给 HTML 模板以在 GAS 中创建以创建无模式对话框

Pass Google Apps Script (GAS) - Charts Service chart to HTML Template to create within GAS to create Modeless Dialog Box

html

javascript

css

google-sheets

google-apps-script

修改后的脚本：

Google Apps 脚本端：

HTML 边: