HTML 본문과의 mailto 링크


319

mailtoHTML 문서에 몇 개의 링크가 있습니다.

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

mailto:일부에 HTML 형식의 본문을 삽입 할 수 있습니까 href?

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

iOS의 (2016)에서 간단한 이탤릭체로 대담한 서식 을 추가 <i>하고 <b>태그 를 추가하는 것이 좋습니다.


1
정확히 같은 것을 염두에두고 잠시 공부했습니다. 메시지 본문에 원격 <img>을 내장하려고했습니다. mailto 명령어는 URL 인코딩되어 있어야 작동합니다. 썬더 버드의 결과는 HTML 본문이 문자 그대로 나타나고 모든 <img> 명령과 모든 것이 나타납니다. 나는 이것이 썬더 버드와 대부분의 메일 클라이언트에서 안전 문제라고 생각합니다. 들어오는 메일 대 콘텐츠를 구문 분석하여 의심스러운 일을하지 않습니다.
Hannes R.

4
내가 찾을 수있는 최선은이 페이지 zazasphere.com/html-email-links-code 에서 온 것입니다 . 아래쪽에는 "대부분의 다른 웹 사이트에서 언급하지 않은 다른 멋진 사용자 정의 항목이 있습니다!" 나를 많이 도와주었습니다.
Stu Andrews

이메일의 모든 부분을 기본 텍스트로 설정할 수 있습니다. html 형식화가 불가능하다는 한계와 관련하여 mailto dead의 다양한 필드를 간단하게 사용자 정의하기 위해 만든 도구가 있습니다. mailto.now.sh
Dawson B

답변:


428

RFC 6068 에서 볼 수 있듯이 전혀 불가능합니다.

특수한 <hfname>"본문"은 연관된 <hfvalue> 본문이 메시지의 본문 임을 나타냅니다 . "body"필드 값은 메시지의 첫 번째 텍스트 / 일반 본문 부분에 대한 내용을 포함합니다. "본문"의사 ​​헤더 필드는 주로 일반 MIME 본문이 아니라 자동 처리를위한 짧은 텍스트 메시지 (메일 링리스트의 "구독"메시지)를 생성하기위한 것입니다.


4
@JoeBlow 답변은 여전히 ​​옳습니다. 2368을 폐기 한 RFC 6068 은 여전히 ​​본문이 일반 텍스트라고 말합니다.
Markus Laire

8
이 답변에 실망한 경우 계속 읽으십시오. stackoverflow.com/a/46699855/256272 (tl; dr .eml 파일)
Joe

95

아니요. 전혀 불가능합니다.


1
엄격하게 사실이 아닙니다. 지원은 매우 드물지만 다른 답변에 따르면 iOS에서 일부 제한된 HTML이 가능하며 IE + ActiveX + Outlook (urgh, yuck) 조합이 가능합니다.
Simon East

89

HTML을 사용하여 이메일 본문을 형식화 할 수는 없지만 이전에 제안한대로 줄 바꿈을 추가 할 수 있습니다.

자바 스크립트를 사용할 수 있다면 "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를 실행할 수 있습니까? OP는 이것이 mailto : 링크가 될 웹 페이지가 아닌 이메일이라고 말합니다.
wide_eyed_pupil

감사합니다. Rails에서는이 raw("text \n more text \n\n\t")기능을 사용하여 텍스트를 캡슐화하고 전자 메일 본문의 줄 바꿈 및 탭으로 변환 할 수 있습니다.
FireDragon

이것은 Chrome "mailto"에서 Outlook으로 전송하여 나를 위해 일했습니다. 전체 mailto 문자열이 아닌 본문 만 인코딩해야합니다. 및 앞뒤에 공백이 필요하지 않습니다 \n.
Luke

2
이 접근 방식이 마음에 들었습니다. 여기에 jsfiddle이 있습니다. jsfiddle.net/oligray/5uosngy4
Oliver Gray

3
줄 바꿈에 % 0A를 사용할 수도 있으므로 JavaScript에서 할 필요가 없습니다.
Dirk Boer

58

나는 이것을 사용했고 HTML을 사용하지 않고 전망과 함께 작동하는 것처럼 보이지만 적어도 본문이 출력으로 추가 될 때 줄 바꿈으로 텍스트의 서식을 지정할 수 있습니다.

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

2
따라서 "% 0D"는 줄 바꿈입니다. 인코딩 된 탭의 코드와 동등한 것은 무엇입니까?
wide_eyed_pupil

3
% 0D는 줄 바꿈 인 ctrl-m이고 탭은 ctrl-i이며 % 09입니다. [ asciitable.com/index/asciifull.gif] 와 같은 ASCII 차트를 살펴보십시오 . 제어 문자는 1부터 31까지입니다. @wide_eyed_pupil
Jim Bergman

2
이 작업을 수행 할 때 모든 서명이 제거 된 것 같습니다.
발렌틴 데 스파

% 0A는 \ n
Klemen Tušar

3
그것은 HTML 본문이 아닙니다!
Chloe

46

그것은 당신이 원하는 것이 아니지만, 현대적인 자바 스크립트를 사용하여 클라이언트에서 EML 파일을 만들고 사용자의 파일 시스템으로 스트리밍 할 수 있습니다.이 파일은 Outlook과 같은 메일 프로그램에서 HTML이 포함 된 풍부한 전자 메일을 열어야합니다.

https://stackoverflow.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" 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>

자바 스크립트

(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);
})();

8
이제 멋진 아이디어입니다
Greg Greg

2
깔끔한 아이디어지만, 최신 Apple Mail에서이 파일은 열리지 만 편집 / 전송할 수 없으며 전송 된 전자 메일 레코드처럼 작동합니다
pmarreck

1
Apple Mail (11.2)을 사용하여 .eml 파일을 열면 메뉴 (shift-cmd-D)에서 메시지 / 다시 보내기를 선택하여 이메일을 편집 모드로 전환 할 수 있습니다.
Jeff Collier

31

어떤 것들은 가능하지만, 모든, 당신이 사용하는 대신, 줄 바꿈을하려면, 예를 들어 말을 <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>                        

7
그것은 HTML이 아닙니다 ... 여전히 텍스트입니다.
Brad

$ mailheader를 사용하여 이메일을 포맷하면 안됩니다. = "콘텐츠 유형 : text / html; charset = iso-8859-1 \ r \ n";
Stephen Kaufman

12
@StephenKaufman-귀하는 이메일을 보내는 사람이 아니라 링크를 클릭하는 고객입니다. 이메일 클라이언트 설정 방법을 모른다는 의미입니다. 헤더 설정 방법을 모릅니다. 일부 이메일 클라이언트에서는 작동하지만 다른 이메일 클라이언트에서는 작동하지 않습니다.
Narxx

1
고마워, 이것은 나를 위해 두 번째로 좋은 옵션이었습니다 .html을 할 수 없다면 적어도 캐리지 리턴을 할 수 있습니다. 나 괜찮아.
hamish

16

그것은 아이폰에서 사파리에, 적어도 같은 기본 HTML 태그를 삽입하는 것을 지적 가치가있다 <b>, <i>그리고 <img>의 몸 매개 변수에 (이상적으로는 CSS 선호, 더 이상 어쨌든 다른 상황에서 사용해서는 안 함) mailto:로 표시 않는다 작업-이메일 클라이언트 내에서 영광입니다. 다른 모바일 또는 데스크탑 브라우저 / 이메일 클라이언트 콤보에서 지원되는지 확인하기 위해 철저한 테스트를 수행하지 않았습니다. 이것이 실제로 표준을 준수하는지 여부도 모호합니다. 그래도 해당 플랫폼을 구축하는 경우 유용 할 수 있습니다.

다른 응답에서 언급했듯이 mailto:링크에 포함하기 전에 전체 본문에서 encodeURIComponent를 사용해야 합니다.


예, iOS에서 간단한 굵은 기울임 꼴 태그를 추가하는 것이 완벽하게 작동합니다.
팻티

iOS에서는 <img src = 'mybase64'/>로 올바른 이메일을 보낼 수 없습니다. Gmail에서 내 메시지에 base64가 표시됩니다.
Vitaly Zdanevich가


0

HTML 공유와 관련하여 동일한 문제가 있습니다. 나는 html로 나를 위해 일한다. <를 <&>로>로 바꾸십시오.

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

참고 : 우분투에서만 작동합니다. 창에서는 작동하지 않습니다.


-1

누구나 다음을 시도 할 수 있습니다 (mailto 함수는 일반 텍스트 만 허용하지만 HTML innertext 속성을 사용하는 방법과 mailto body 매개 변수로 앵커를 추가하는 방법을 보여줍니다).

//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

줄 바꿈 (예 :)을 삽입하기 위해 유니 코드 값을 입력 할 수 \u0009있지만 HTML 태그는 지원 수준이 다양하므로 피해야합니다.


-11

나는 이런 식으로 일했다.

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

결과는 다음과 같습니다.

Hello
World  
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.