mailto link with HTML body
Question
I have a couple of mailto links in a HTML document.
<a href="mailto:etc...">
Can I insert HTML formatted body in the mailto: part of the href ?
<a href="mailto:me@me.com?subject=Me&body=<b>ME</b>">Mail me</a>
Note that (2016) in iOS, it is perfectly fine to add <i> and <b> tags for simple italic, bold formatting.
10 answers
solution1
456 ACCPTED 2012-11-16 11:47:34
As you can see in RFC 6068 , this is not possible at all:
The special
<hfname>"body" indicates that the associated<hfvalue>is the body of the message. The "body" field value is intended to contain the content for the first text/plain body part of the message. The "body" pseudo header field is primarily intended for the generation of short text messages for automatic processing (such as "subscribe" messages for mailing lists), not for general MIME bodies.
solution2
106 2012-05-09 16:38:54
Whilst it is NOT possible to use HTML to format your email body you can add line breaks as has been previously suggested.
If you are able to use javascript then "encodeURIComponent()" might be of use like below...
var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:x@y.com?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;
solution3
97 2011-04-11 11:01:31
不，这根本不可能。
solution4
67 2012-02-23 11:04:04
我已经使用了它，它似乎可以与 Outlook 一起使用，而不是使用 html，但至少在将正文添加为输出时，您可以使用换行符格式化文本。
<a href="mailto:email@address.com?subject=Hello world&body=Line one%0DLine two">Email me</a>
solution5
62 2017-10-12 01:11:12
It's not quite what you want, but it's possible using modern javascript to create an EML file on the client and stream that to the user's file system, which should open a rich email containing HTML in their mail program, such as Outlook:
https://stackoverflow.com/a/27971771/8595398
Here's a jsfiddle of an email containing images and tables: 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);
})();
solution6
35 2014-01-28 20:40:28
Some things are possible, but not all, say for example you want line breaks, instead of using <br /> use %0D%0A
Example:
<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>
solution7
16 2012-05-17 14:38:40
It is worth pointing out that on Safari on the iPhone, at least, inserting basic HTML tags such as <b> , <i> , and <img> (which ideally you shouldn't use in other circumstances anymore anyway, preferring CSS) into the body parameter in the mailto: does appear to work - they are honored within the email client. I haven't done exhaustive testing to see if this is supported by other mobile or desktop browser/email client combos. It's also dubious whether this is really standards-compliant. Might be useful if you are building for that platform, though.
As other responses have noted, you should also use encodeURIComponent on the entire body before embedding it in the mailto: link.
solution8
8 2019-09-05 21:57:25
Thunderbird 支持html-body : mailto:me@me.com?subject=Me&html-body=<b>ME</b>
solution9
0 2019-06-12 21:07:59
Anybody can try the following (mailto function only accepts plaintext but here i show how to use HTML innertext properties and how to add an anchor as mailto body params):
//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
solution10
0 2022-07-29 13:19:16
Whilst it may not be possible within the parameter of the URL, there is a cheeky solution which allows full HTML. The concept is that you have a hidden element on the page (I am using Bootstrap and Jquery in the example below) which is temporarily revealed and the HTML copied (as per here: How to copy text from a div to clipboard ). Following that, you redirect the user to the Mail link so in effect all they then have to do is hit Paste within their designated mail program. I've only tested this on Linux/Thunderbird but the paste also works into Gmail web.
<div id="copyEmailText" class="d-none"><p><strong>This is some HTML</strong>. Please hit paste when your email program opens.</p>
function copyDivToClipboard(element) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand('copy');
window.getSelection().removeAllRanges();// to deselect
}
$('#copyEmail').on('click',function(){
$('#copyEmailText').toggleClass('d-none');
copyDivToClipboard($('#copyEmailText')[0]);
window.location.href = 'mailto:?subject=Email subject text';
$('#copyEmailText').toggleClass('d-none');
})
solution11
-3 2013-09-13 19:54:50
可以输入unicode值以插入换行符（即\ ），但是HTML标签具有不同程度的支持，应避免使用。
solution12
-11 2016-11-22 09:58:47
I have worked this way:
var newLine = escape("\n");
var body = "Hello" + newLine +"World";
Output would be:
Hello
World
solution13
-30 2011-04-11 11:01:56
Here's how you add everything to a MAILTO link:
<a href="mailto:YourName@YourSite.com? cc=someone@YourSite.com&bcc=someoneElse@YourSite.com &subject=Shipping%20Information%20Request&body=Please%20tell%20me%20if%20my%20order%20has%20shipped!">Shipping Request</a>
Each component is separated by the ampersand (&) sign. Only the first component after the initial email address has a question mark (?) preceding the ampersand.
URL-encode is the key! So for your example of a body, instead of your
href='mailto:me@me.com?subject=Me&body=<b>ME</b>'
...you might try:
href='mailto:me@me.com?subject=Me&body=%3cb%3eME%3c%2fb%3e'
Here's another route you might try. Create a javascript function to open an ActiveX object. This has the unfortunate limitation of only working in IE and Outlook, and may cause your page to show activex warnings. But if you can live with these caveats, it does the job. Here's a working sample you can draw from:
<html>
<head>
<script type='text/javascript' language='javascript'>
function OpenOutlookNewEmail()
{
try
{
var outlookApp = new ActiveXObject("Outlook.Application");
var nameSpace = outlookApp.getNameSpace("MAPI");
mailFolder = nameSpace.getDefaultFolder(6);
mailItem = mailFolder.Items.add('IPM.Note.FormA');
mailItem.Subject = "Me";
mailItem.To = "me@me.com";
mailItem.HTMLBody = "<b>ME</b>";
mailItem.display(0);
}
catch (e)
{
alert(e);
// act on any error that you get
}
}
</script>
</head>
<body>
<a href='javascript:OpenOutlookNewEmail()' >email</a>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.