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:me@me.com?subject=Me&body=<b>ME</b>">Mail me</a>

Observe que (2016) no iOS, é perfeitamente bom adicionar e 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

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:x@y.com?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@address.com?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  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 , 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

4

O Thunderbird suporta html-body :mailto:me@me.com?subject=Me&html-body=ME

— Peter
fonte

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=<a href='www.google.com'>google</a>">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