logo标签列表

mailto链接与HTML正文

htmlemailmailto
399

我在HTML文档中有几个mailto链接。

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

我能否在 href 的 mailto: 部分插入带有 HTML 格式的正文内容？

<a href="mailto:me@me.com?subject=Me&body=<b>ME</b>">Mail me</a>

请注意，在iOS中（2016年），添加<i>和<b>标签以进行简单的斜体、粗体格式化是完全可以的。

1
我一直在考虑同样的事情并研究了一段时间。我试图将嵌入式远程<img>放入消息正文中。为使其工作，必须对mailto指令进行URL编码。在Thunderbird中的结果是HTML正文会字面出现，包括所有的<img>指令等。我想这是Thunderbird和大多数邮件客户端的安全问题 - 它们解析传入的mailto内容以确保它不会做任何可疑的事情。 - Hannes R.
5
我找到的最好资源来自这个页面，http://www.zaposphere.com/html-email-links-code/。页面底部提供了一个列表：“其他许多网站没有提到的很酷的定制功能!!” 这对我有很大帮助。 - Stu Andrews
您可以使用基本文本设置电子邮件的每个部分。关于无法使用HTML格式的限制，这是我构建的一个工具，可使自定义mailto中的各个字段变得非常简单：mailto.now.sh - Dawson B
10个回答
475
如 RFC 6068 中所示，这是不可能的：
特殊的<hfname>“body”表示相关的<hfvalue>是消息的正文。 "body"字段值旨在包含消息的第一个text/plain正文部分的内容。 “body”伪报头字段主要用于生成自动处理的短文本消息（例如邮件列表的“订阅”消息），而不是用于普通的MIME正文。
11
如果您对这个答案感到失望，请继续阅读：https://dev59.com/8G035IYBdhLWcg3wGMHa#46699855 （简而言之， .eml文件）。 - Joe
119

虽然不能使用HTML格式化电子邮件正文，但可以像之前建议的那样添加换行符。

如果您能够使用JavaScript，那么"encodeURIComponent()"可能会有用，如以下代码所示...

var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:x@y.com?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;
1
电子邮件客户端可以运行嵌入式Javascript吗？原帖作者表示这是一封电子邮件，而不是一个mailto链接所在的网页。 - wide_eyed_pupil
感谢您的询问。在Rails中，您可以使用raw（“text \n more text \n\n\t”）函数来封装文本，并将其转换为电子邮件正文中的换行符和制表符。 - FireDragon
我尝试使用 \b 来加粗文本，但它没有起作用。还支持哪些其他转义序列？ - Prabakaran Raja
2
我喜欢这种方法，这里有一个 jsfiddle 可以看到它的实际效果：https://jsfiddle.net/oligray/5uosngy4/ - Oliver Gray
5
您可以使用“%0A”来进行换行，这样您就不需要从JavaScript中进行操作。 - Dirk Boer
显示剩余2条评论
100

不可能实现。

5
不完全准确。虽然支持非常有限，但其他答案已经显示在iOS中一些有限的HTML是可能的，并且结合IE+ActiveX+Outlook（呃，讨厌）也能实现。 - Simon East
81

虽然不完全符合您的要求，但使用现代JavaScript可以在客户端创建一个EML文件并将其流式传输到用户的文件系统中，这应该会在他们的邮件程序（例如Outlook）中打开包含HTML的丰富电子邮件：

https://dev59.com/oV4c5IYBdhLWcg3wapvz#27971771

这里是一个包含图像和表格的电子邮件jsfiddle：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);
})();
15
那是个花俏的想法。 - Greg
2
不错的想法，但是仅供参考，在最新的苹果邮件中，这个文件可以打开，但无法进行编辑/发送，它的作用类似于已发送的电子邮件记录。 - pmarreck
2
使用Apple Mail（11.2），打开.eml文件后，您可以从菜单中选择“消息/再次发送”（shift-cmd-D）将电子邮件置于编辑模式。 - Collierton
11
这个解决方案在另一个类似的问题中被探讨过。然而，正如@JamesBell所提到的那样：不愉快的更新：Chrome（自大约v.46以来）已经开始标记.EML文件可能是恶意的。我不知道一个文本文件会引起什么可怕的后果，但我认为他们有他们的理由。 - James Bell Jun 29 '16 at 20:03 - yougotiger
1
我有类似的需求，并且已经采用了这种方法，但是我的电子邮件内容中包含base64编码的图像。当生成eml时，图像的大小会减小。以下是相同问题的链接：https://stackoverflow.com/questions/67523117/image-size-reduced-when-base64encoded-image-is-embedded-in-rich-email-containing - AnitaS
显示剩余4条评论
72
我已经使用过这个方法，似乎可以在Outlook上运行，不使用HTML，但至少可以通过换行符格式化文本，当将其输出到正文时。
<a href="mailto:email@address.com?subject=Hello world&body=Line one%0DLine two">Email me</a>
2
所以 "%0D" 表示换行符。编码的制表符代码等效于什么？ - wide_eyed_pupil
4
％0Ｄ是换行符，对应的 ASCII 码为 ctrl-m；制表符则是％09，对应的 ASCII 码为 ctrl-i。您可以查看类似于 [http://www.asciitable.com/index/asciifull.gif] 的 ASCII 表来了解这些控制字符，它们的编码范围是 1 到 31。 - Jim Bergman
3
在执行此操作时似乎会删除任何签名。 - Valentin Despa
8
这不是一个 HTML 主体！ - Chloe
1
美观，也可以在Confluence页面内插入链接。 - Vinay
显示剩余2条评论
38

有些事情是可能的，但并非全部。例如，您想要换行，而不是使用<br />，可以使用%0D%0A

示例：

<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>
11
那不是HTML...仍然是文本。 - Brad
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; 如果您使用此代码格式化电子邮件，则不会出现问题。 - Stephen Kaufman
14
@StephenKaufman - 你不是发送电子邮件的人，而是点击链接的客户端。这意味着你不知道电子邮件客户端的设置情况，也不知道它的标头设置方式。这个方法可以在某些电子邮件客户端上使用，但在其他客户端上可能无法使用。 - Narxx
1
谢谢，这对我来说是第二好的选择，如果我不能做HTML，那么至少我可以做回车符。我很满意。 - hamish
16
值得一提的是，在iPhone上的Safari浏览器中，至少在将基本HTML标签（<b>、<i>和<img>）插入到mailto:的body参数中时（在其他情况下最好不要再使用它们，而是使用CSS），它们会在电子邮件客户端中被正确显示。我没有进行详尽的测试以查看其他移动或桌面浏览器/电子邮件客户端组合是否支持此功能。这也值得怀疑是否真的符合标准规范，但如果您正在为该平台构建应用程序，这可能会很有用。
正如其他回答所指出的那样，在将整个body嵌入mailto:链接之前，您还应该对其进行encodeURIComponent处理。
是的，在iOS中添加简单的粗体、斜体标签确实可以完美地工作。 - Fattie
在iOS上，我无法使用<img src='mybase64'/>发送正确的电子邮件 - 在Gmail中，我看到我的消息中有base64。 - Vitaly Zdanevich
14
链接已经失效了。有人可以更新一下吗？ - Terry Windwalker
我更新了损坏的链接。 - Peter
1

虽然在URL的参数范围内可能无法实现，但有一个巧妙的解决方案可以允许完整的HTML。这个概念是在页面上有一个隐藏的元素（我在下面的示例中使用了Bootstrap和Jquery），它被暂时显示出来并复制HTML（如此处所述：如何从div复制文本到剪贴板）。之后，您将用户重定向到邮件链接，因此实际上他们只需要在指定的邮件程序中点击“粘贴”即可。我只在Linux / Thunderbird上测试过这个方法，但粘贴也适用于Gmail网页。

<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');
})
1
点击粘贴按钮会破坏邮件链接的body参数的目的。 - Mark Richman
0
任何人都可以尝试以下操作（mailto函数仅接受纯文本，但我在这里展示如何使用HTML innertext属性以及如何添加锚作为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
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接