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:me@me.com?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.


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.


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.


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:x@y.com?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;

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@address.com?subject=Hello world&body=Line one%0DLine two">Email me</a>

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);
})();

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>                        

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.


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.


-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

-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.


-11

He trabajado de esta manera:

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

La salida sería:

Hello
World  
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.