在发送带有文本的 HTML 电子邮件时出现图像中断答案

【问题标题】：Image break in sending HTML email with text over image在发送带有文本的 HTML 电子邮件时出现图像中断
【发布时间】：2020-02-25 22:00:33
【问题描述】：

我在 Photoshop 中裁剪了一张图片并生成了 HTML！我需要在第二张图片中插入一个文本并将其发送到电子邮件的正文中，如果文本不在图像的左侧而不在我需要的内部，那么一切都几乎完美无缺！

我有以下代码：

'<tr>'+
    '<td>'+
        '<img src="https://drive.google.com/uc?export=download&id=1G90igOahW8OW9Hls-cdUYHWMoE1p-mWy" width="80" height="37"  border="0"  style="display:block" alt=""></td>'+
        //'<div class="texto">'+
          //'<i id="spaceText" class="fas fa-search"></i>'+dados[i][0]+'</td>'+
        //'</div>'+
     '<td>'+

生成以下内容：

这就是我需要的：

下面是一个包含完整代码的演示表，以便更好地理解：

https://docs.google.com/spreadsheets/d/1L3gJEkxf43FHiIpKpq9vdLKyQSvOzXJwDyMM8oot10s/edit?usp=sharing

非常感谢您能帮助我并回复详细信息，因为我的脚本和 HTML 知识很少

【问题讨论】：

丰富的 HTML 电子邮件模板是一个绝对的痛苦。如果这个问题绝对需要解决方案，我会研究 Litmus 和 campaignmonitor。
我对代码几乎一无所知，如果可能的话，你能帮我解决这个问题吗？我需要通过谷歌电子表格发送这个，显然它不接受 CSS。

标签： javascript html google-sheets spreadsheet

【解决方案1】：

如果您有格式问题：了解如何在 html 中应用 css

看看：CSS Grid、Flexbox、margins等。

如果你想在 html 标签中实现 css，请使用 style 属性

点赞<td style="background-color:grey">

您在您的 Apps 脚本项目中使用 v8，这意味着您可以使用 Modern ECMAScript syntax

在您的示例中，您可以使用反引号字符 `：

var mensagem =`
  <html>
    <head>
      <title>VLNP</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
...
    </head>
  </html>`;

而不是

     var mensagem = 

'<html>'+
'<head>'+
'<title>VLNP</title>'+
'<meta http-equiv="Content-Type" content="text/html; charset=utf-8">'+
'</head>'+
...
'</body>'+
'</html>'

回答

我运行了这段代码，它没有给我任何错误，只需使用您的电子邮件更改 email 值

function Envia_VLNP_Capa_NOK() { 

  var linhaINICIAL = 2; 
  var colunaENVIO = 2;  
  var colunaSTATUS = 3;
  var textoCONDICAO = "NOK";
  var textoENVIADO = "ENVIADO"
  var blob = 3

  var aba = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Teste"); 
  var intervalo = aba.getRange(linhaINICIAL,1,aba.getLastRow()-linhaINICIAL+1,colunaSTATUS);
  var dados = intervalo.getValues();
  var enviou = false;
  var email,assunto,mensagem;


  for (var i=0; i<dados.length; ++i) {

   {muteHttpExceptions: true};

    if((dados[i][colunaENVIO-1]==textoCONDICAO) && (dados[i][colunaSTATUS-1]!=textoENVIADO)){

    var email    =  "YOUR EMAIL HERE";

     assunto = "Email"; //ASSUNTO DO EMAIL

     var mensagem =`
<html>

<head>
  <title>VLNP</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  <div id="centro" align="center">
    <table id="Tabela_01" width="821" height="519" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="2">
          <a href=""><img src="" width="240" height="104" border="0" style="display:block" alt=""></td>
        <td colspan="5"><img src="" width="581" height="104" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td><img src="https://drive.google.com/uc?export=download&id=1G90igOahW8OW9Hls-cdUYHWMoE1p-mWy" width="80" height="37" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1qB6NKacg9bPtR9uwxIPm7ybE7_nUG_rx" width="160" height="37" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1XPPcFrXPiZPqU6pIPPmBrC6mQiRUebfd" width="114" height="37" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1L2UKyJrFoeRJeYYmZPnfOs_Cj_nlI0-0" width="71" height="37" border="0" style="display:block" alt=""></td>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1c1FRGq7M5QSVLwo-irV-SvIY-TzEAnpe" width="206" height="37" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1VR8R2zqjW5_9uOraU1hy-e5TVDsHBqLA" width="190" height="37" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td><img src="https://drive.google.com/uc?export=download&id=1Rc4DgamoemPTaNCq4Icw4msSmiNMErln" width="80" height="37" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1_yGNsXPM9bYbsu-QUwTzsMrWPrJSLMyb" width="160" height="37" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1553JARZd5XhUZe2zxZcAtnznL2myXem1" width="114" height="37" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1wLoIIWtbXxyocfN3TNK2AYMLUCXNshvZ" width="71" height="37" border="0" style="display:block" alt=""></td>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1Yaz_sxIZ7zupZRmOdlDrexsy51MQkqgX" width="206" height="37" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1bmhrhWo-ebFN7Ghw56bzxoUfrQZBr3pE" width="190" height="37" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1ypxusUG5JtwqmHWEa5uUa2qNCnZxa_vA" width="240" height="37" border="0" style="display:block" alt=""></td>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1cvAhxUsNiMRKt64SwZtRYr4LuK8dtV4t" width="185" height="37" border="0" style="display:block" alt=""></td>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1qCGIFOPX73TYt_itnKv9Zxnw74ws6aRn" width="206" height="37" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1ya-Km4psgwepbSwqhgPawhv6WK8hv9gG" width="190" height="37" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1zo5QTk4Ef0S1Zj_dEJISvOmlw5T0_mNM" width="240" height="36" border="0" style="display:block" alt=""></td>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1ETmwu43LC2OMixSUd8nSC_J3pEmfUX_0" width="185" height="36" border="0" style="display:block" alt=""></td>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1NVsJ5jZflCtHXCE08piXjFbW_RAn3rCk" width="206" height="36" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=16Ugp4eo5vzxUYNhYBPXx1ZBpwBVit_I6" width="190" height="36" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1qP0s8bm_xLO7nlORBbUVg6tA3vu3KCQx" width="240" height="38" border="0" style="display:block" alt=""></td>
        <td colspan="3"><img src="https://drive.google.com/uc?export=download&id=1bSbEosPlKL3WzRgYwwuV8YX-MV4vuVmy" width="321" height="38" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1WX3JRF_aWuDRx6l7M5o4swDI58TOq8Uo" width="70" height="38" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1Z4eNiw7PMyiFdtYtdeviQkUmRF4zMbxt" width="190" height="38" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1PNKJx2ljyqbYnt0i6sguZlcxLa26PzcX" width="240" height="36" border="0" style="display:block" alt=""></td>
        <td colspan="5"><img src="https://drive.google.com/uc?export=download&id=1Y3mOwl06UqV2t0kcDAsi4ygWRffIObr9" width="581" height="36" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1IS_HgF9fsWjAfEsjwk4wQKaCJFU83bmS" width="240" height="38" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=11UMdMkm4NutyQYfztzCudXAbudMieR4o" width="114" height="38" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1kk-6wLUpg4-cWAFrHWx_VCedpBb3517C" width="71" height="38" border="0" style="display:block" alt=""></td>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1-Zpkl_8JuXvy0f-pvgW2DXETNJtZWU81" width="206" height="38" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=18-47MkDHGRAAyciEEIk4nuBz2ajKFVKH" width="190" height="38" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1WcNT6MdC940TAOdJAlhKIZImLMoy9Xls" width="240" height="37" border="0" style="display:block" alt=""></td>
        <td colspan="5"><img src="https://drive.google.com/uc?export=download&id=1A45V8ueSYnHhltTvMOuxGBJy2jfjxsxS" width="581" height="37" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=11yyLRhuNU8H56_lGKxG-CeHGmvpN_KD6" width="240" height="37" border="0" style="display:block" alt=""></td>
        <td colspan="3"><img src="https://drive.google.com/uc?export=download&id=18-jQ5v9uq_PuRFpU4oUtLA_1PpSxDVek" width="321" height="37" border="0" style="display:block" alt=""></td>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1uNGTCwOOb8QRkJOifegAtWaiaianiSfN" width="260" height="37" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=13WbYtt6edWWln_ZApd29OBYK-BkryAwV" width="240" height="37" border="0" style="display:block" alt=""></td>
        <td colspan="5"><img src="https://drive.google.com/uc?export=download&id=1ZIeQakA13FjeBAIR2rgOimtm1K25JLpi" width="581" height="37" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="2"><img src="https://drive.google.com/uc?export=download&id=1XJKXPZ7bOyNF0l5aafOpUtBJ8iHf9Wrr" width="240" height="36" border="0" style="display:block" alt=""></td>
        <td colspan="3"><img src="https://drive.google.com/uc?export=download&id=1o7HRdKoeDDTBfM1m63J4NjO0ATqDBQ2Z" width="321" height="36" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=1Kyl-Zdrod-0E1swXkd3IKBL90BkGFs5e" width="70" height="36" border="0" style="display:block" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=11HGlHI8_1DNHfnp7tPAAd2a_4ASXrxhh" width="190" height="36" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td colspan="7"><img src="https://drive.google.com/uc?export=download&id=142HNTaQedKvTQeQcKIYZnd_gUEdKe0ky" width="821" height="8" border="0" style="display:block" alt=""></td>
      </tr>
      <tr>
        <td><img src="https://drive.google.com/uc?export=download&id=131B3o4OVmXBBffATnnBSe7d_jPlhdPes" width="80" height="1" border="0" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=131B3o4OVmXBBffATnnBSe7d_jPlhdPes" width="160" height="1" border="0" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=131B3o4OVmXBBffATnnBSe7d_jPlhdPes" width="114" height="1" border="0" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=131B3o4OVmXBBffATnnBSe7d_jPlhdPes" width="71" height="1" border="0" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=131B3o4OVmXBBffATnnBSe7d_jPlhdPes" width="136" height="1" border="0" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=131B3o4OVmXBBffATnnBSe7d_jPlhdPes" width="70" height="1" border="0" alt=""></td>
        <td><img src="https://drive.google.com/uc?export=download&id=131B3o4OVmXBBffATnnBSe7d_jPlhdPes" width="190" height="1" border="0" alt=""></td>
      </tr>
    </table>
  </div>
</body>

</html>`;

    MailApp.sendEmail(email, assunto, mensagem,{ htmlBody: mensagem, image: blob}); // Modified

    aba.getRange(linhaINICIAL+i,colunaSTATUS)
    //.setValue("ENVIADO");
    enviou = true;
    SpreadsheetApp.flush();

    }
  } 
}

【讨论】：

您好，@Jeff Rush 感谢您的帮助，但如果您能帮我解决我的问题，非常感谢！我检查了参考资料，但我的知识不允许我申请！看到我有两张图片，我需要让代码显示在电子邮件正文中，就像第二张图片一样，而我只有第一张！请注意，在第 50、51、52 行中，它是在电子表格中插入单元格 A2 的值的行！我现在在电子表格中有两个代码，你的和我的！如果我设法解决我的问题，我将非常感激！提前致谢！
@SidneyCardosodosSantos 我建议您使用 HTML 表格而不是图像，因为您可以使用原始表格获得更好的结果。关于您的问题，我帮助您解决了格式问题。考虑接受我的回答并提出新问题，例如 如何创建 html 表格、如何发送带有工作表数据的 html 表格。