javascript - Google 表单文件上传 - 如何使用通过表单提交的图像并将其嵌入电子邮件中

标签 javascript google-apps-script google-sheets gmail google-forms

我在一个项目上遇到了一些困难,需要一些帮助。

目的:我正在尝试提交一个谷歌表单,其中包含各种数据和图像。 然后将使用表单数据触发 HTML 电子邮件并嵌入图像。

到目前为止,除了嵌入图像之外,我可以做所有事情。

这是我到目前为止所拥有的。

代码.gs

      function getData() {
   var sh = SpreadsheetApp.getActive()
       .getSheetByName('Form responses 1');
   return sh.getRange(sh.getLastRow(), 1, 1, sh.getLastColumn())
       .getValues()[0]

}





function testEmail() {
   var htmlBody = HtmlService
       .createTemplateFromFile('mail_template')
       .evaluate()
       .getContent();
var mailADdy = "myemail@email.co.uk";
   MailApp.sendEmail({
       to:mailADdy,
       subject: 'Test Email markup - ' + new Date(),
       htmlBody: htmlBody,
   });

  }

mail_template.html

    <!DOCTYPE html>
<html>
  <head>
    <style>
      @media only screen and (max-device-width: 480px) {
        /* mobile-specific CSS styles go here */
      }
    </style>
  </head>
  <body>
   <? var data = getData(); ?>
   <? var first = data[2]; ?>
   <? var second = data[3]; ?>
       <? var third = data[4]; ?>
       <? var fourth = data[5]; ?>

  /* imageUpload var is the link to the image that's been uploaded, in "https://drive.google.com/open?id=ID" format"*/
       <? var imageUpload = data[6]; ?>

   /* Below are some things that I've tried and failed */
   <? var imageID = imageUpload.replace("https://drive.google.com/open?id=","");?>
  <? var imageBlob = UrlFetchApp.fetch(imageUpload).getBlob().setName("imageBlob");?>
   <? var imageBlob = DriveApp.getFileById(imageID).getBlob();?>





    <div class="main">
      <p style="text-align: center;"><strong>This is a test HTML email.</strong></p>
      <table style="margin-left: auto; margin-right: auto;">
        <tbody>
          <tr>
            <td style="text-align: left;">First question to be put here</td>
            <td style="text-align: right;"><strong><?= first ?></strong> </td>
          </tr>
          <tr>
            <td style="text-align: left;">Second question here</td>
            <td style="text-align: right;"><?= second ?></td>
          </tr>
          <tr>
            <td style="text-align: left;">Third question here</td>
            <td style="text-align: right;"><?= third ?></td>
          </tr>
          <tr>
            <td style="text-align: left;">Image Upload test</td>
            <td style="text-align: right;"><?= imageUpload ?></td>
          </tr>
        </tbody>
      </table>
      <p></p>
      <p style="text-align: center;"><img src="https://imageurl.com" alt="Logo" /></p>
    </div>
  </body>
</html>

getData 函数返回工作表中的最后一行数据(这将是最近提交的表单) testEmail 发送电子邮件。

mail_template 包含电子邮件的 HTML。布局等

通过使用 scriplet,我可以将表单值放入电子邮件中并发送。

然而,无论我对图像进行了怎样的尝试,我都无法得到正确的结果。

当我尝试在 HTML 文件中使用以下 scriptlet 时,

 <? var imageBlob = UrlFetchApp.fetch(imageUpload).getBlob().setName("imageBlob");?>

我收到以下错误。

执行失败:您无权调用 fetch

我也尝试过:

<? var imageBlob = DriveApp.getFileById(imageID).getBlob();?>

但仍然无法正常工作。

我确实尝试跟踪此链接中的信息, How to include inline images in email using MailApp

但无法将其转换为我的示例,因为它们没有使用单独的 HTML 文件

感谢任何帮助/指示。

最佳答案

首先,您收到的错误是因为您从未授予 GAS 访问 UrlFetch 或 DriveApp 的权限。这似乎违反直觉,但如果您仅查看 GAS 脚本,您会发现您从未在 GAS 端调用这些函数。因此,当您运行 GAS 脚本时,编译器永远不会看到对 UrlFetch 或 DriveApp 的调用。因此,不需要您的许可来运行它。但是,在运行时,评估方法尝试访问这些方法,但授权失败。

这可以通过在 GAS 端使用一个虚拟函数来调用该函数来解决。就像这样

function dummyFunction(){
 DriveApp.getRootFolder()
 UrlFetchApp.fetch("www.google.com")
}

你永远不需要运行这些函数,但在编译过程中,它会要求对这些方法进行授权。因此,当您运行评估方法时,不会出现授权问题。

其次,引入内嵌图像,如here所述。您不必在 HTML 端获取 imageBlob。您需要获取一个 GAS 脚本。您只需在 html 页面上包含一个 img 标签,如下所示。

<tr>
    <td style="text-align: left;">Image</td>
    <td style="text-align: right;"><img src ="cid:imageKey"/></td>
</tr>

在 GAS 上,您将像这样修改代码:

function testEmail() {
   var htmlBody = HtmlService
       .createTemplateFromFile('mail_template')
       .evaluate()
       .getContent();
        var mailADdy = "myemail@email.co.uk";
        var data = getData()
        var imageUpload = data[6]; 
        var imageID = imageUpload.replace("https://drive.google.com/open?id=","")
        // Use one of the below method to get the imageBloB
        var imageBlob = UrlFetchApp.fetch(imageUpload).getBlob().setName("imageBlob")
       //var imageBlob = DriveApp.getFileById(imageID).getBlob()

   MailApp.sendEmail({
       to:mailADdy,
       subject: 'Test Email markup - ' + new Date(),
       htmlBody: htmlBody,
       inlineImages:
       {
         imageKey: imageBlob,
       }
   });

  }

如果您使用此技术,则不必在 html 页面上调用 urlFetch 或 DriveApp,并且可以删除这些 scriptlet 行。

关于javascript - Google 表单文件上传 - 如何使用通过表单提交的图像并将其嵌入电子邮件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43966083/

相关文章:

javascript - 如何使箭头键和空格键不强制我的网页下降?

javascript - FlatList 不会在 Prop 更改时重新渲染

javascript - 谷歌应用程序脚本 : How to change text color of label on hover?

arrays - 如何在 Google Sheet 的 App Script 中创建数组的真正新副本?

javascript - 从文本框中选择文本时触发函数

javascript - 如何从 Openlayers 3 图层获取像素的颜色值?

node.js - 如何在谷歌工作表中同步添加行?

google-apps-script - Google Apps 电子表格根据当前日期(月份)打开特定表格

javascript - 如何知道 Google 日历中是否使用 GAS 创建了事件?

google-apps-script - Google Apps 脚本 CoffeeScript