mailto link com o corpo HTML

319

Eu tenho alguns mailtolinks em um documento HTML.

<a href="mailto:etc...">

Posso inserir HTML formatado corpo na mailto:parte da href?

<a href="mailto:[email protected]?subject=Me&body=<b>ME</b>">Mail me</a>

Observe que (2016) no iOS, é perfeitamente bom adicionar <i>e <b>marcar uma formatação simples em negrito e itálico.

html email mailto GxG
fonte
1
Tinha exatamente a mesma coisa em mente e estudou por um tempo. Eu estava tentando ter um <img> remoto incorporado no corpo da mensagem. A instrução mailto precisa ser codificada em URL para que funcione. O resultado com o Thunderbird foi que o corpo do HTML apareceu literalmente, com todas as instruções <img> e tudo. Eu acho que esse é um problema de segurança no Thunderbird e na maioria dos clientes de email - eles analisam o conteúdo de email para que ele não faça nada de suspeito.
Hannes R.
4
O melhor que pude encontrar veio desta página, zaposphere.com/html-email-links-code . No final da página, aparece uma lista: "Outras personalizações legais que a maioria dos outros sites não menciona !!" Me ajudou muito.
Stu Andrews
Você pode definir todas as partes de um email com texto básico. Com relação às limitações que html formatação não é possível, aqui está uma ferramenta que eu construído para fazer a personalização dos vários campos em um simples mailto mortos: mailto.now.sh
Dawson B

Respostas:

428

Como você pode ver na RFC 6068 , isso não é possível:

O <hfname>"corpo" especial indica que o associado <hfvalue> é o corpo da mensagem. O valor do campo "corpo" deve conter o conteúdo da primeira parte do texto / corpo sem formatação da mensagem. O pseudo campo de cabeçalho "body" é destinado principalmente à geração de mensagens curtas de texto para processamento automático (como mensagens de "inscrição" para listas de endereçamento), não para corpos MIME gerais.

Alfonso Marin
fonte
4
A resposta @JoeBlow ainda está correta. A RFC 6068, que obsoleta 2368, ainda diz que o corpo é um texto simples.
Markus Laire
8
Se você está decepcionado com a resposta, por favor, continue lendo: stackoverflow.com/a/46699855/256272 (tl; dr arquivos .eml)
Joe
95

Não. Isso não é possível.

Quentin
fonte
1
Não é estritamente verdade. Embora o suporte seja muito escasso, outras respostas mostraram que é possível um pouco de HTML limitado no iOS e uma combinação do IE + ActiveX + Outlook (urgh, eca).
Simon East
89

Embora NÃO seja possível usar HTML para formatar o corpo do email, você pode adicionar quebras de linha, conforme sugerido anteriormente.

Se você é capaz de usar o javascript, "encodeURIComponent ()" pode ser útil como abaixo ...

var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:[email protected]?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;
Oliver Pearmain
fonte
1
Os clientes de email podem executar Javascript incorporado? O OP diz que este é um email, não uma página da Web na qual o link mailto: estará.
wide_eyed_pupil
graças, em Rails você pode usar a raw("text \n more text \n\n\t")função para texto encapsular e ter este convertido em quebras de linha e guias para o corpo e-mail
FireDragon
Isso funcionou para mim, enviando de um "mailto" do Chrome para o Outlook. Observe que você deve codificar apenas o texto do corpo, não toda a cadeia mailto; e você não precisa de espaços antes / depois do \n.
Lucas
2
Eu gostei desta abordagem, aqui está uma jsFiddle para vê-lo em ação: jsfiddle.net/oligray/5uosngy4
Oliver Grey
3
Você também pode usar% 0A para uma quebra de linha, para não precisar fazer isso com JavaScript.
Dirk Boer
58

Eu usei isso e parece funcionar com o Outlook, não usando html, mas você pode formatar o texto com quebras de linha pelo menos quando o corpo é adicionado como saída.

<a href="mailto:[email protected]?subject=Hello world&body=Line one%0DLine two">Email me</a>
Andy
fonte
2
Então "% 0D" é uma nova linha. O que é equivalente ao código de uma guia codificada?
wide_eyed_pupil
3
% 0D é uma nova linha que é ctrl-m, uma guia é ctrl-i que é% 09. Dê uma olhada em um gráfico ASCII como este [ asciitable.com/index/asciifull.gif] . Os caracteres de controle são de 1 a 31. @wide_eyed_pupil
Jim Bergman
2
Qualquer assinatura parece ser removida ao fazer isso.
Valentin Despa
% 0A seria \ n
Klemen Tušar 14/10
3
Isso não é um corpo HTML!
Chloe
46

Não é exatamente o que você deseja, mas é possível usar o javascript moderno para criar um arquivo EML no cliente e transmiti-lo ao sistema de arquivos do usuário, que deve abrir um e-mail rico contendo HTML em seu programa de e-mail, como o Outlook:

https://stackoverflow.com/a/27971771/8595398

Aqui está um jsfiddle de um email contendo imagens e tabelas: https://jsfiddle.net/seanodotcom/yd1n8Lfh/

HTML

<!-- https://jsfiddle.net/seanodotcom/yd1n8Lfh -->
<textarea id="textbox" style="width: 300px; height: 600px;">
To: User <user@domain.demo>
Subject: Subject
X-Unsent: 1
Content-Type: text/html

<html>
<head>
<style>
    body, html, table {
        font-family: Calibri, Arial, sans-serif;
    }
    .pastdue { color: crimson; }
    table {
        border: 1px solid silver;
        padding: 6px;
    }
    thead {
        text-align: center;
        font-size: 1.2em;
        color: navy;
        background-color: silver;
        font-weight: bold;
    }
    tbody td {
        text-align: center;
    }
</style>
</head>
<body>
<table width=100%>
    <tr>
        <td><img src="http://www.laurell.com/images/logo/laurell_logo_storefront.jpg" width="200" height="57" alt=""></td>
        <td align="right"><h1><span class="pastdue">PAST DUE</span> INVOICE</h1></td>
    </tr>
</table>
<table width=100%>
    <thead>
        <th>Invoice #</th>
        <th>Days Overdue</th>
        <th>Amount Owed</th>
    </thead>
    <tbody>
    <tr>
        <td>OU812</td>
        <td>9</td>
        <td>$4395.00</td>
    </tr>
    <tr>
        <td>OU812</td>
        <td>9</td>
        <td>$4395.00</td>
    </tr>
    <tr>
        <td>OU812</td>
        <td>9</td>
        <td>$4395.00</td>
    </tr>
    </tbody>
</table>
</body>
</html>
</textarea> <br>
<button id="create">Create file</button><br><br>
<a download="message.eml" id="downloadlink" style="display: none">Download</a>

Javascript

(function () {
var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }
    textFile = window.URL.createObjectURL(data);
    return textFile;
  };

  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');
  create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');
    link.href = makeTextFile(textbox.value);
    link.style.display = 'block';
  }, false);
})();
Mateus
fonte
8
Agora que é uma idéia chique
Greg
2
Idéia legal, mas apenas para o registro, na mais recente Apple Mail, este arquivo será aberto, mas não será editável / sendable, ele age como um registro enviado e-mail
pmarreck
1
Com o Apple Mail (11.2), depois de abrir o arquivo .eml, você pode selecionar Mensagem / Enviar novamente no menu (shift-cmd-D) para colocar o email no modo de edição.
Jeff Collier
31

Algumas coisas são possíveis, mas não todas, digamos, por exemplo, que você queira quebras de linha, em vez de usar <br />use%0D%0A

Exemplo: 

<a href="mailto:?subject=&body=Hello,%0D%0A%0D%0AHere is the link to the PDF Brochure.%0D%0A%0D%0ATo view the brochure please click the following link: http://www.uyslist.com/yachts/brochure.pdf"><img src="images/email.png" alt="EMail PDF Brochure" /></a>
Stephen Kaufman
fonte
7
Isso não é HTML ... texto estático.
Brad
não se você formatar seu email usando $ mailheader. = "Tipo de conteúdo: text / html; charset = iso-8859-1 \ r \ n";
Stephen Kaufman
12
@StephenKaufman - não é você quem envia o email, mas os clientes que clicam no link. Isso significa que você não sabe como o cliente de email está definido. Você não sabe como seus cabeçalhos são definidos. Isso funcionará em alguns clientes de email e em outros.
Narxx
1
obrigado, essa foi a segunda melhor opção para mim, se não posso fazer html, pelo menos posso fazer retornos de carro. por mim tudo bem.
hamish
16

Vale ressaltar que no Safari no iPhone, pelo menos, a inserção de tags HTML básicas como <b>, <i>e <img>(que idealmente você não deve mais usar em outras circunstâncias, de qualquer forma, preferindo CSS) no parâmetro body no mailto:parece trabalho - eles são homenageados no cliente de email. Não realizei testes exaustivos para verificar se isso é suportado por outros combos de cliente de e-mail para navegador móvel ou de desktop. Também é duvidoso que isso seja realmente compatível com os padrões. Pode ser útil se você estiver construindo para essa plataforma.

Como outras respostas observaram, você também deve usar encodeURIComponent em todo o corpo antes de incorporá-lo no mailto:link.

Andrew Ferrier
fonte
Sim, ele funciona perfeitamente para adicionar tags simples em negrito e itálico - no iOS de qualquer maneira.
Fattie
No iOS, não consigo enviar o email correto com <img src = 'mybase64' /> - no Gmail, vejo base64 na minha mensagem.
Vitaly Zdanevich 6/02/19
0

Eu tenho o mesmo problema em relação ao compartilhamento de html. Eu faço abaixo do trabalho html para mim. Substitua <por <&> por>.

<a href="mailto:?subject=link Share&body=&lt;a href='www.google.com'&gt;google&lt;/a&gt;">Email</a>

Nota: Funciona apenas no ubuntu. Não vai funcionar no Windows.

Rajan Kashiyani
fonte
-1

Qualquer um pode tentar o seguinte (a função mailto aceita apenas texto sem formatação, mas aqui mostrarei como usar as propriedades HTML innertext e como adicionar uma âncora como parâmetros do corpo mailto): 

//Create as many html elements you need.

const titleElement = document.createElement("DIV");
titleElement.innerHTML = this.shareInformation.title; // Just some string

//Here I create an <a> so I can use href property
const titleLinkElement = document.createElement("a");
titleLinkElement.href = this.shareInformation.link; // This is a url

...

let mail = document.createElement("a");

// Using es6 template literals add the html innerText property and anchor element created to mailto body parameter
mail.href = 
  `mailto:?subject=${titleElement.innerText}&body=${titleLinkElement}%0D%0A${abstractElement.innerText}`;
mail.click();

// Notice how I use ${titleLinkElement} that is an anchor element, so mailto uses its href and renders the url I needed
Miguel Ballén
fonte
-3

É possível inserir valores unicode para inserir novas linhas (ou seja:), \u0009mas as tags HTML têm vários graus de suporte e devem ser evitadas.

Ryan Dunphy
fonte
-11

Eu trabalhei desta maneira:

var newLine = escape("\n");
var body = "Hello" + newLine +"World";

A saída seria:

Hello
World
Ravi Solanki
fonte