lien mailto avec corps HTML

319

J'ai quelques mailtoliens dans un document HTML.

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

Puis-je insérer un corps au format HTML dans la mailto:partie duhref ?

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

Notez que (2016) dans iOS, il est parfaitement correct d'ajouter <i>et de <b>balises pour une mise en forme simple en italique et en gras.

html email mailto GxG
la source
1
Avait exactement la même chose en tête et l'a étudié pendant un moment. J'essayais d'avoir une télécommande <img> intégrée dans le corps du message. L'instruction mailto doit être encodée en URL pour qu'elle fonctionne. Le résultat avec thunderbird était que le corps HTML apparaissait littéralement, avec toutes ses instructions <img> et tout. Je suppose que c'est un problème de sécurité dans Thunderbird et dans la plupart des clients de messagerie - ils analysent le contenu du courrier entrant afin qu'il ne fasse rien de suspect.
Hannes R.
4
Le meilleur que j'ai pu trouver est venu de cette page, zaposphere.com/html-email-links-code .. En bas, donne une liste: "Autres personnalisations intéressantes que la plupart des autres sites Web ne mentionnent pas !!" M'a beaucoup aidé.
Stu Andrews
Vous pouvez définir chaque partie d'un e-mail avec un texte de base. En ce qui concerne les limitations que le formatage html n'est pas possible, voici un outil que j'ai construit pour simplifier la personnalisation des différents champs dans un mailto: mailto.now.sh
Dawson B

Réponses:

428

Comme vous pouvez le voir dans la RFC 6068 , ce n'est pas possible du tout:

Le <hfname>"corps" spécial indique que l'associé <hfvalue> est le corps du message. La valeur du champ "corps" est destinée à contenir le contenu de la première partie de texte / corps brut du message. Le champ pseudo-en-tête "body" est principalement destiné à la génération de messages texte courts pour le traitement automatique (tels que les messages "subscribe" pour les listes de diffusion), pas pour les corps MIME généraux.

Alfonso Marin
la source
4
@JoeBlow La réponse est toujours correcte. La RFC 6068 qui rend obsolète 2368 dit toujours que le corps est en texte brut.
Markus Laire
8
Si vous êtes déçu par cette réponse, veuillez continuer à lire: stackoverflow.com/a/46699855/256272 (fichiers tl; dr .eml)
Joe
95

Non, ce n'est pas possible du tout.

Quentin
la source
1
Pas strictement vrai. Bien que le support soit très rare, d'autres réponses ont montré qu'un HTML limité est possible dans iOS et une combinaison IE + ActiveX + Outlook (urgh, beurk).
Simon East
89

Bien qu'il ne soit PAS possible d'utiliser HTML pour formater votre corps de courrier électronique, vous pouvez ajouter des sauts de ligne comme cela a été suggéré précédemment.

Si vous pouvez utiliser javascript, alors "encodeURIComponent ()" pourrait être utile comme ci-dessous ...

var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:[email protected]?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;
Oliver Pearmain
la source
1
Les clients de messagerie peuvent-ils exécuter du Javascript intégré? Le PO indique qu'il s'agit d'un e-mail et non d'une page Web sur laquelle le lien mailto: sera.
wide_eyed_pupil
merci, dans Rails, vous pouvez utiliser la raw("text \n more text \n\n\t")fonction pour encapsuler le texte et le convertir en sauts de ligne et en tabulations pour le corps de l'e-mail
FireDragon
Cela a fonctionné pour moi, l'envoi d'un "mailto" Chrome à Outlook. Notez que vous devez uniquement coder le corps du texte, pas la chaîne mailto entière; et vous n'avez pas besoin d'espaces avant / après le \n.
Luke
2
J'ai aimé cette approche, voici un jsfiddle pour le voir en action: jsfiddle.net/oligray/5uosngy4
Oliver Gray
3
Vous pouvez également utiliser% 0A pour un saut de ligne, vous n'avez donc pas besoin de le faire à partir de JavaScript.
Dirk Boer
58

J'ai utilisé cela et cela semble fonctionner avec Outlook, sans utiliser de HTML, mais vous pouvez formater le texte avec des sauts de ligne au moins lorsque le corps est ajouté en sortie.

<a href="mailto:[email protected]?subject=Hello world&body=Line one%0DLine two">Email me</a>
Andy
la source
2
"% 0D" est donc une nouvelle ligne. Quel est le code équivalent d'un onglet codé?
wide_eyed_pupil
3
% 0D est une nouvelle ligne qui est ctrl-m, un onglet est ctrl-i qui est% 09. Jetez un œil à un graphique ASCII comme celui-ci [ asciitable.com/index/asciifull.gif] . Les caractères de contrôle vont de 1 à 31. @wide_eyed_pupil
Jim Bergman
2
Toute signature semble être supprimée lors de cette opération.
Valentin Despa
% 0A serait \ n
Klemen Tušar
3
Ce n'est pas un corps HTML!
Chloe
46

Ce n'est pas tout à fait ce que vous voulez, mais il est possible d'utiliser un javascript moderne pour créer un fichier EML sur le client et le diffuser dans le système de fichiers de l'utilisateur, ce qui devrait ouvrir un e-mail riche contenant du HTML dans leur programme de messagerie, tel qu'Outlook:

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

Voici un jsfiddle d'un email contenant des images et des tableaux: 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);
})();
Matthieu
la source
8
Maintenant, c'est une idée de fantaisie
Greg
2
Bonne idée, mais pour mémoire, sur le dernier Apple Mail, ce fichier s'ouvrira mais ne sera pas modifiable / envoyable, il agit comme un enregistrement de courrier électronique envoyé
pmarreck
1
Avec Apple Mail (11.2), une fois que vous avez ouvert le fichier .eml, vous pouvez sélectionner Message / Envoyer à nouveau dans le menu (shift-cmd-D) pour mettre l'e-mail en mode édition.
Jeff Collier
31

Certaines choses sont possibles, mais pas toutes, disons par exemple que vous voulez des sauts de ligne, au lieu d'utiliser <br />use%0D%0A

Exemple: 

<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
la source
7
Ce n'est pas du HTML ... encore du texte.
Brad
pas si vous formatez votre email en utilisant $ mailheader. = "Content-type: text / html; charset = iso-8859-1 \ r \ n";
Stephen Kaufman
12
@StephenKaufman - vous n'êtes pas celui qui envoie l'e-mail, mais les clients qui cliquent sur le lien. Cela signifie que vous ne savez pas comment le client de messagerie est défini. Vous ne savez pas comment ses en-têtes sont définis. Cela fonctionnera sur certains clients de messagerie et pas sur d'autres.
Narxx
1
merci, c'était la deuxième meilleure option pour moi, si je ne peux pas faire de HTML, alors au moins je peux faire des retours chariot. bien par moi.
hamish
16

Il convient de souligner que sur Safari sur l'iPhone, au moins, l' insertion de balises HTML de base tels que <b>, <i>et <img>(qui , idéalement , vous ne devriez pas utiliser dans d' autres circonstances plus de toute façon, préférant CSS) dans le paramètre du corps dans la mailto:ne semble travail - ils sont honorés au sein du client de messagerie. Je n'ai pas effectué de tests exhaustifs pour voir si cela est pris en charge par d'autres combinaisons navigateur / client de messagerie mobile ou de bureau. Il est également douteux que ce soit vraiment conforme aux normes. Cela pourrait cependant être utile si vous construisez pour cette plate-forme.

Comme d'autres réponses l'ont noté, vous devez également utiliser encodeURIComponent sur tout le corps avant de l'intégrer dans le mailto:lien.

Andrew Ferrier
la source
Oui, cela fonctionne parfaitement pour ajouter des balises simples en gras et en italique - dans iOS de toute façon.
Fattie
Sur iOS, je ne peux pas envoyer d'e-mail correct avec <img src = 'mybase64' /> - dans Gmail, je vois base64 dans mon message.
Vitaly Zdanevich
0

J'ai le même problème concernant le partage html. Je fais ci-dessous le travail html pour moi. Remplacez <par <&> par>.

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

Remarque: cela ne fonctionne que dans ubuntu. Cela ne fonctionnera pas dans les fenêtres.

Rajan Kashiyani
la source
-1

Tout le monde peut essayer ce qui suit (la fonction mailto accepte uniquement le texte en clair, mais ici je montre comment utiliser les propriétés HTML de texte interne et comment ajouter une ancre en tant que paramètres de corps de 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
la source
-3

Il est possible d'entrer des valeurs Unicode pour insérer des sauts de ligne (ie:) \u0009mais les balises HTML ont différents degrés de support et doivent être évitées.

Ryan Dunphy
la source
-11

J'ai travaillé de cette façon:

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

La sortie serait:

Hello
World
Ravi Solanki
la source