enlace mailto con cuerpo HTML

319

Tengo un par de mailtoenlaces en un documento HTML.

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

¿Puedo insertar un cuerpo con formato HTML en la mailto:parte de href?

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

Tenga en cuenta que (2016) en IOS, es perfectamente posible añadir <i>y <b>etiquetas para cursiva simple, el formato de negrita.

html email mailto GxG
fuente
1
Tenía exactamente lo mismo en mente y lo estudié por un tiempo. Intentaba tener un <img> remoto integrado en el cuerpo del mensaje. La instrucción mailto debe estar codificada en URL para que funcione. El resultado con thunderbird fue que el cuerpo HTML apareció literalmente, con todas sus instrucciones <img> y todo. Supongo que este es un problema de seguridad en Thunderbird y en la mayoría de los clientes de correo: analizan el contenido de correo entrante para que no haga nada sospechoso.
Hannes R.
44
Lo mejor que pude encontrar vino de esta página, zaposphere.com/html-email-links-code .. En la parte inferior aparece una lista: "¡¡Otras personalizaciones geniales que la mayoría de los otros sitios web no mencionan !!" Me ayudó mucho.
Stu Andrews
Puede configurar cada parte de un correo electrónico con texto básico. Con respecto a las limitaciones de que el formato html no es posible, aquí hay una herramienta que construí para hacer que la personalización de los distintos campos en un mailto sea simple: mailto.now.sh
Dawson B

Respuestas:

428

Como puede ver en RFC 6068 , esto no es posible en absoluto:

El <hfname>"cuerpo" especial indica que el asociado <hfvalue> es el cuerpo del mensaje. El valor del campo "cuerpo" está destinado a contener el contenido de la primera parte de texto / cuerpo sin formato del mensaje. El campo de pseudo encabezado "cuerpo" está destinado principalmente a la generación de mensajes de texto cortos para procesamiento automático (como mensajes de "suscripción" para listas de correo), no para cuerpos MIME generales.

Alfonso Marin
fuente
44
La respuesta de @JoeBlow sigue siendo correcta. RFC 6068 que obsoleta 2368 todavía dice que el cuerpo es texto sin formato.
Markus Laire
8
Si esta respuesta le decepciona, siga leyendo: stackoverflow.com/a/46699855/256272 (tl; archivos dr .eml)
Joe
95

No. Esto no es posible en absoluto.

Quentin
fuente
1
No es estrictamente cierto. Si bien el soporte es muy escaso, otras respuestas han demostrado que es posible un HTML limitado en iOS y una combinación de IE + ActiveX + Outlook (urgh, yuck).
Simon East
89

Si bien NO es posible usar HTML para formatear el cuerpo de su correo electrónico, puede agregar saltos de línea como se sugirió anteriormente.

Si puede usar JavaScript, entonces "encodeURIComponent ()" podría ser útil como se muestra a continuación ...

var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:[email protected]?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;
Oliver Pearmain
fuente
1
¿Pueden los clientes de correo electrónico ejecutar Javascript incrustado? El OP dice que este es un correo electrónico, no una página web en la que estará el enlace mailto:
wide_eyed_pupil
gracias, en Rails se puede utilizar la raw("text \n more text \n\n\t")función de texto a encapsular y tener esta convertido a los saltos de línea y tabuladores para el cuerpo del correo electrónico
FireDragon
Esto funcionó para mí, enviando desde un "mailto" de Chrome a Outlook. Tenga en cuenta que solo debe codificar el texto del cuerpo, no toda la cadena mailto; y no necesitas espacios antes / después del \n.
Lucas
2
Me gustó este enfoque, aquí hay un jsfiddle para verlo en acción: jsfiddle.net/oligray/5uosngy4
Oliver Gray
3
También puede usar% 0A para un salto de línea, por lo que no necesita hacerlo desde JavaScript.
Dirk Boer
58

He usado esto y parece funcionar con Outlook, no usando html, pero puede formatear el texto con saltos de línea al menos cuando el cuerpo se agrega como salida.

<a href="mailto:[email protected]?subject=Hello world&body=Line one%0DLine two">Email me</a>
Andy
fuente
2
Entonces "% 0D" es nueva línea. ¿Qué es el código equivalente de una pestaña codificada?
wide_eyed_pupil
3
% 0D es una nueva línea que es ctrl-m, una pestaña es ctrl-i que es% 09. Eche un vistazo a un cuadro ASCII como este [ asciitable.com/index/asciifull.gif] . Los personajes de control son del 1 al 31. @wide_eyed_pupil
Jim Bergman
2
Cualquier firma parece ser eliminada al hacer esto.
Valentin Despa
% 0A sería \ n
Klemen Tušar
3
¡Ese no es un cuerpo HTML!
Chloe
46

No es exactamente lo que desea, pero es posible usar JavaScript moderno para crear un archivo EML en el cliente y transmitirlo al sistema de archivos del usuario, que debería abrir un correo electrónico enriquecido que contenga HTML en su programa de correo, como Outlook:

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

Aquí hay un jsfiddle de un correo electrónico que contiene imágenes y tablas: 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);
})();
Mateo
fuente
8
Ahora que es una idea elegante
Greg
2
Buena idea, pero solo para el registro, en el último Apple Mail, este archivo se abrirá pero no será editable / enviable, actúa como un registro de correo electrónico enviado
pmarreck
1
Con Apple Mail (11.2), una vez que haya abierto el archivo .eml, puede seleccionar Mensaje / Enviar nuevamente desde el menú (shift-cmd-D) para poner el correo electrónico en modo de edición.
Jeff Collier
31

Algunas cosas son posibles, pero no todas, por ejemplo, quiere saltos de línea, en lugar de usar el <br />uso%0D%0A

Ejemplo: 

<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
fuente
77
Eso no es HTML ... sigue siendo texto.
Brad
no si formatea su correo electrónico usando $ mailheader. = "Content-type: text / html; charset = iso-8859-1 \ r \ n";
Stephen Kaufman, el
12
@StephenKaufman: usted no es el que envía el correo electrónico, sino los clientes que hacen clic en el enlace. Lo que significa que no sabes cómo está configurado el cliente de correo electrónico. No sabes cómo se configuran sus encabezados. Esto funcionará en algunos clientes de correo electrónico y no en otros.
Narxx
1
gracias, esta fue la segunda mejor opción para mí, si no puedo hacer html, al menos puedo hacer retornos de carro. bien por mi.
hamish
16

Vale la pena señalar que en Safari en el iPhone, al menos, la inserción de etiquetas HTML básicas tales como <b>, <i>y <img>(que idealmente no debería utilizar en otras circunstancias ya todos modos, prefiriendo CSS) en el parámetro del cuerpo en el mailto:que sí parece trabajo: son honrados dentro del cliente de correo electrónico. No he realizado pruebas exhaustivas para ver si esto es compatible con otras combinaciones de clientes de correo electrónico o navegador móvil o de escritorio. También es dudoso si esto realmente cumple con los estándares. Sin embargo, podría ser útil si está construyendo para esa plataforma.

Como han señalado otras respuestas, también debe usar encodeURIComponent en todo el cuerpo antes de incrustarlo en el mailto: enlace.

Andrew Ferrier
fuente
Sí, funciona perfectamente para agregar etiquetas simples en negrita y cursiva, de todos modos en iOS
Fattie
En iOS no puedo enviar el correo electrónico correcto con <img src = 'mybase64' /> - en Gmail veo base64 dentro de mi mensaje.
Vitaly Zdanevich
0

Tengo el mismo problema con respecto a compartir html. Hago debajo del trabajo html para mí. Reemplace <con <&> con>.

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

Nota: Funciona solo en ubuntu. No funcionará en Windows.

Rajan Kashiyani
fuente
-1

Cualquiera puede intentar lo siguiente (la función mailto solo acepta texto plano, pero aquí muestro cómo usar las propiedades de texto inne HTML y cómo agregar un ancla como parámetros del cuerpo 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
fuente
-3

Es posible ingresar valores Unicode para insertar nuevas líneas (es decir:) \u0009pero las etiquetas HTML tienen diferentes grados de soporte y deben evitarse.

Ryan Dunphy
fuente
-11

He trabajado de esta manera:

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

La salida sería:

Hello
World
Ravi Solanki
fuente