带有 HTML 正文的 mailto 链接

Posted

技术标签:

【中文标题】带有 HTML 正文的 mailto 链接【英文标题】:mailto link with HTML body 【发布时间】:2011-08-02 23:34:20 【问题描述】:

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

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

我可以在hrefmailto: 部分插入HTML 格式的正文吗?

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

请注意,在 ios 中 (2016),添加 &lt;i&gt;&lt;b&gt; 标记以实现简单的斜体、粗体格式是完全可以的。

【问题讨论】:

心中的想法完全一样,研究了一段时间。我试图在消息正文中嵌入一个远程 。 mailto 指令需要进行 URL 编码才能正常工作。使用 Thunderbird 的结果是 HTML 正文以字面形式出现,其中包含所有 指令和所有内容。我想这是 Thunderbird 和大多数邮件客户端的安全问题——它们解析传入的邮件到内容,这样它就不会做任何可疑的事情。 我能找到的最好的来自这个页面,zaposphere.com/html-email-links-code .. 底部列出了一个列表:“其他大多数网站没有提到的酷自定义!!”帮了我很多忙。 您可以使用基本文本设置电子邮件的每个部分。关于无法进行 html 格式化的限制,这是我构建的一个工具,可以让自定义 mailto 中的各个字段变得简单:mailto.now.sh 【参考方案1】:

Thunderbird supportshtml-body:mailto:me@me.com?subject=Me&amp;html-body=&lt;b&gt;ME&lt;/b&gt;

【讨论】:

【参考方案2】:

任何人都可以尝试以下方法(mailto 函数只接受纯文本,但这里我展示了如何使用 HTML 内部文本属性以及如何添加锚作为 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】:

这不是您想要的,但可以使用现代 javascript 在客户端创建一个 EML 文件并将其流式传输到用户的文件系统,该文件系统应在其邮件程序中打开包含 HTML 的丰富电子邮件,例如 Outlook:

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

这是包含图像和表格的电子邮件的 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"   ></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);
)();

【讨论】:

现在这是一个奇思妙想 好主意,但只是为了记录,在最新的 Apple Mail 上,此文件将打开但不可编辑/可发送,它就像一个已发送的电子邮件记录 使用 Apple Mail (11.2),打开 .eml 文件后,您可以从菜单中选择 Message / Send Again (shift-cmd-D) 将电子邮件置于编辑模式。 这个解决方案在另一个类似的question 上进行了探索。然而事实证明,@JamesBell 提到:令人不快的更新:Chrome(从 v.46 开始)已经开始将 .EML 文件标记为可能是恶意的。不知道文本文件会导致什么恐怖,但我认为他们有他们的理由。 – 詹姆斯·贝尔 2016 年 6 月 29 日在 20:03 不适用于 Outlook 16 和 FF 78 或 IE 11,但适用于 Edge 90。【参考方案4】:

正如您在RFC 6068 中看到的,这根本不可能:

特殊的&lt;hfname&gt;“body”表示关联的&lt;hfvalue&gt; 是消息的正文。 “body”字段值旨在 包含第一个文本/纯正文部分的内容 信息。 “body”伪标头字段主要用于 生成用于自动处理的短文本消息(例如 作为邮件列表的“订阅”消息),不适用于一般 MIME 身体。

【讨论】:

@JoeBlow 答案仍然正确。 RFC 6068 废弃的 2368 仍然表示正文是纯文本。 如果您对这个答案感到失望,请继续阅读:***.com/a/46699855/256272(tl;dr .eml 文件)【参考方案5】:

有些事情是可能的,但不是全部,例如你想要换行符,而不是使用&lt;br /&gt;use %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"  /></a>                        

【讨论】:

那不是 HTML... 还是文本。 如果您使用 $mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; 格式化电子邮件则不会 @StephenKaufman - 您不是发送电子邮件的人,而是点击链接的客户。这意味着您不知道电子邮件客户端的设置方式。你不知道它的标题是如何设置的。这适用于某些电子邮件客户端,但不适用于其他客户端。 谢谢,这对我来说是第二好的选择,如果我不能做html,那么至少我可以做回车。我很好。【参考方案6】:

值得指出的是,至少在 iPhone 上的 Safari 上,插入基本的 HTML 标签,例如 &lt;b&gt;&lt;i&gt;&lt;img&gt;(理想情况下,无论如何你都不应该在其他情况下使用这些标签,更喜欢 CSS)到 mailto: 中的 body 参数中似乎确实有效 - 它们在电子邮件客户端中受到尊重。我还没有进行详尽的测试以查看其他移动或桌面浏览器/电子邮件客户端组合是否支持此功能。这是否真的符合标准也令人怀疑。不过,如果您正在为该平台构建,可能会很有用。

正如其他回复所指出的,在将其嵌入mailto: 链接之前,您还应该在整个正文上使用 encodeURIComponent。

【讨论】:

是的,添加简单的粗体、斜体标签确实非常有效——无论如何在 iOS 中。 在 iOS 上,我无法使用 发送正确的电子邮件 - 在 Gmail 中,我在邮件中看到 base64。【参考方案7】:

虽然无法使用 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;

【讨论】:

电子邮件客户端可以运行嵌入式 Javascript 吗? OP 说这是一封电子邮件,而不是 mailto: 链接所在的网页。 谢谢,在 Rails 中,您可以使用 raw("text \n more text \n\n\t") 函数来封装文本并将其转换为电子邮件正文的换行符和制表符 这对我有用,从 Chrome 的“mailto”发送到 Outlook。请注意,您必须只对正文文本进行编码,而不是对整个 mailto 字符串进行编码; \n 之前/之后不需要空格。 我喜欢这种方法,这里有一个 jsfiddle 可以看到它的实际效果:jsfiddle.net/oligray/5uosngy4 您也可以只使用 %0A 进行换行,因此您无需从 JavaScript 中执行此操作。【参考方案8】:

我用过这个,它似乎适用于 Outlook,而不是使用 html,但至少在将正文添加为输出时,您可以使用换行符格式化文本。

<a href="mailto:email@address.com?subject=Hello world&body=Line one%0DLine two">Email me</a>

【讨论】:

所以 "%0D" 是换行符。什么是编码选项卡的等效代码? %0D 是换行符,即 ctrl-m,制表符是 ctrl-i,即 %09。看看这样的 ASCII 图表 [asciitable.com/index/asciifull.gif].控制字符从 1 到 31。@wide_eyed_pupil 执行此操作时似乎删除了任何签名。 %0A 将是 \n 这不是 HTML 正文!【参考方案9】:

没有。这根本不可能。

【讨论】:

不完全正确。虽然支持非常稀缺,但其他答案表明,在 iOS 和 IE+ActiveX+Outlook 的组合中,一些有限的 HTML 是可能的(呃,糟糕)。

以上是关于带有 HTML 正文的 mailto 链接的主要内容,如果未能解决你的问题,请参考以下文章

HTML mailto:链接内置的电子邮件,主题和正文

mailto链接多个正文行

Blazor 中带有主题和正文的 Mailto

使用mailto时如何解决正文中不显示换行符的问题?

ios分享联系人结合mailto

英HTML mailto link