Разрыв изображения при отправке HTML электронного письма с текстом поверх изображения - PullRequest
Новая
       13

Разрыв изображения при отправке HTML электронного письма с текстом поверх изображения

1 голос
/ 26 февраля 2020

Я обрезал изображение в фотошопе и сгенерировал 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>'+

, который генерирует следующее: Obtained

И это то, что мне нужно: Wanted

Ниже приведен демонстрационный лист с полным кодом для лучшего понимания:

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

Я очень благодарен за помощь мне и ответьте с деталями, так как мои знания малы в сценариях и HTML

1 Ответ

1 голос
/ 26 февраля 2020

Если у вас есть проблемы с форматированием: узнайте, как применить css в html

Если вы хотите реализовать css внутри html, используйте теги атрибут стиля

  • Мне нравится <td style="background-color:grey">

Вы используете v8 в своем проекте Apps Script Это означает, что вы можете использовать Современный синтаксис ECMAScript

  • В вашем примере вы можете использовать символ обратного тика `: 
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();

    }
  } 
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...