Question

我正在尝试使用HTML模板发送电子邮件。

我看过这篇文章：（https://stackoverflow.com/questions/33178702/passing-variables-into-html-code）

两个代码示例中的任何一个都可以接近可以将变量从Javascript传递到HTML模板的东西吗？我的javascript变量名为detail2，detail3，detail4，detail5和detail6。

第一次尝试：

<html>
  <head>
    <script>
    {
    
    var detail2 = document.getElementById("detail2").innerHTML;
    var detail3 = document.getElementById("detail3").innerHTML;
    var detail4 = document.getElementById("detail4").innerHTML;
    var detail5 = document.getElementById("detail5").innerHTML;
    var detail6 = document.getElementById("detail6").innerHTML;

      }
    }
    </script>
  </head>
  <body>
    
<p>
      <br>"Punctual? " document.getElementById('detail2').value<br>
      <br>"Attention to detail? " document.getElementById('detail3').value<br> 
      <br>"Overall Professionalism? " document.getElementById('detail4').value<br> 
      <br>"Date of Service: " document.getElementById('detail5').value<br>
      <br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>

  </body>
</html>

第二次尝试：

<html>
  <head>
    <script>
    {
    
    <input type="hidden" id="Detail2" value="detail2" />
    <input type="hidden" id="Detail3" value="detail3" />
    <input type="hidden" id="Detail4" value="detail4" />
    <input type="hidden" id="Detail5" value="detail5" />
    <input type="hidden" id="Detail6" value="detail6" />

      }
    }
    </script>
  </head>
  <body>
    
<p>
      <br>"Punctual? " document.getElementById('detail2').value<br>
      <br>"Attention to detail? " document.getElementById('detail3').value<br> 
      <br>"Overall Professionalism? " document.getElementById('detail4').value<br> 
      <br>"Date of Service: " document.getElementById('detail5').value<br>
      <br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>

  </body>
</html>

最后，GAS Dev上给出的方法如下，但这只会让我更加困惑。我确信我已经这么久了，而且我已经烧坏了，我似乎无法看到这个答案。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

如果有人可以帮助它非常感谢！

以下是.gs脚本文件中的Javascript。

function SendEmail() {
                                   // initialize data
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getActiveSheet();
 var range = sheet.getDataRange();
 var values = range.getValues();
                                   // iteration loop
    for (var i = 1; i<values.length; i++) {
                                   // current times for comparator
 var month = new Date().getMonth();          // returns today as 0-11 -- Jan is 0
 var day = new Date().getDate();             // returns today as 1-31
 var hour = new Date().getHours();           // returns today as 0-23
 var minute = new Date().getMinutes();       // returns today as 0-59
                                   // pull data from spreadsheet rows
 var company = values[i][0];
 var rating = values[i][1];
 var detail1 = values[i][2];
 var detail2 = values[i][3];
 var detail3 = values[i][4];
 var detail4 = values[i][5];
 var detail5 = values[i][6];
 var sendTime = values[i][7];
                                   // character send times for comparator
 var cSendMonth = sendTime.getMonth();        // returns sendMonth as 0-11 -- Jan is 0
 var cSendDay = sendTime.getDate();           // returns sendDay as 1-31
 var cSendHour = sendTime.getHours();         // returns sendHour as 0-23
 var cSendMinute = sendTime.getMinutes();     // returns sendMinute as 0-59
                                   // comparator
    if(cSendMonth == month) {
      if(cSendDay == day) {
        if(cSendHour == hour) {
          if(cSendMinute == minute) {
 var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
      MailApp.sendEmail({
          to: Session.getActiveUser().getEmail(),
          subject: 'Test Email markup2 - ' + new Date(),
          htmlBody: htmlBody,
  });
          } // end if minute test
        }// end if hour test
       }// end if day test
      }// end if month test
    }// end for loop
}

Answer 1

你可以尝试：

<html>
  <head>
    <script>
      (function() {
         var detail2 = document.getElementById("detail2").innerHTML;
         document.getElementById("detail2_val").innerHTML = detail2; 
      })();    
    </script>
  </head>
  <body>

   <p>
      <br>"Punctual?" <span id="detail2_val"></span><br>
   </p>

  </body>
</html>

Answer 2

目前，这一行：

var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();

不会评估模板。

使用的方法是：

createHtmlOutputFromFile('mail_template')

HtmlService有很多创建html内容的方法。你需要使用：

HtmlService.createTemplateFromFile(filename).evaluate()

您的整体工作流程可能会出现一些问题。如果情况是您正在写入数据，然后立即尝试读取刚刚写入的相同数据，则可能会出现新数据无法在如此短的时间内读取的问题。

我会用：

SpreadsheetApp.flush();

在写入新数据之后，以及创建模板之前。

只有您的第三个html示例包含模板的代码。要检索数据并将其放入模板，scriptlet必须运行一个函数，然后检索数据，或者数据必须在全局变量中。具有全局变量的情况没有意义，因为您正在使用动态数据，因此需要运行函数以首先将数据放入全局变量中。该函数也可以直接返回数据。因此，您的scriptlet可能需要运行服务器端函数并将文本或HTML返回到html模板。您可能需要使用打印scriptlet。

Apps Script documentation - force printing scriptlets

如何使用element属性从Javascript

2 个答案: