Передать Google Apps Script (GAS) — диаграмму службы диаграмм в HTML-шаблон в GAS

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

Я просто хотел бы передать объект диаграммы, сгенерированный из службы диаграмм, в шаблоне HTML (где я выбираю - не в виде вложения, а в шаблоне) по электронной почте. Мне удалось прикрепить объект диаграммы, но я хотел бы интегрировать его в само электронное письмо/вставить

Вот код скрипта Google Apps (также с использованием кода выше) ↓↓↓ */

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: "[email protected]", ////////// <- input your email for testing
    subject: "Hello here are your highlights for today",
    htmlBody: message,
    // bcc: "[email protected]",
    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>```

я не думаю, что это возможно

— 02.05.2022 22:41

Я думаю, вы можете получить изображение диаграммы. Я знаю, что ты умеешь разбираться в клиентских диаграммах.

— 03.05.2022 00:19

javascript google-apps-script google-sheets gmail

02.05.2022 20:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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: "[email protected]", ////////// <- input your email for testing
    subject: "Hello here are your highlights for today",
    htmlBody: message,
    // bcc: "[email protected]",
    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>