web-dev-qa-db-fra.com

lien mailto avec corps HTML

J'ai un couple de mailto liens dans un document HTML.

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

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

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

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

htmlemailmailto
288
GxG

Comme vous pouvez le voir dans RFC 6068 , ceci n’est pas du tout possible:

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

406
Alfonso Marin

Non, ce n'est pas possible du tout.

94
Quentin

Bien qu'il ne soit PAS possible d'utiliser HTML pour formater le corps de votre email, vous pouvez ajouter des sauts de ligne comme 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;
76
Oliver Pearmain

J'ai utilisé cela et il semble fonctionner avec Outlook, pas avec 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>
52
Andy

Ce n'est pas tout à fait ce que vous voulez, mais vous pouvez utiliser un javascript moderne pour créer un fichier EML sur le client et le diffuser sur le système de fichiers de l'utilisateur, ce qui devrait ouvrir un courrier électronique riche contenant du code HTML dans son programme de messagerie, tel que Outlook:

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

Voici un message électronique 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 <[email protected]>
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);
})();
31
Matthew

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>
24
Stephen Kaufman

Il est à noter que sur Safari sur iPhone, au moins, l'insertion de balises HTML de base telles que <b>, <i> et <img> (que vous ne devriez idéalement pas utiliser dans d'autres circonstances de toute façon, préférant CSS) dans le paramètre body du mailto:, il semble que _ fonctionne correctement - ils sont honorés dans le client de messagerie. Je n'ai pas fait de test exhaustif pour voir si cela est supporté par d'autres combos de navigateur/client de messagerie mobile ou de bureau. Il est également douteux que cela soit vraiment conforme aux normes. Cela pourrait être utile si vous construisez pour cette plate-forme, cependant.

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

16
Andrew Ferrier

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