link mailto z treścią HTML


319

Mam kilka mailtolinków w dokumencie HTML.

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

Czy mogę wstawić treść sformatowaną w HTML do mailto:części href?

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

Zauważ, że (2016) w iOS, dodawanie <i>i <b>tagi dla prostej kursywy, pogrubionego formatowania są w porządku .


1
Miał dokładnie to samo na myśli i przez chwilę go studiował. Próbowałem mieć osadzonego pilota <img> w treści wiadomości. Instrukcja mailto musi być zakodowana, aby działała. Rezultatem Thunderbirda było to, że ciało HTML pojawiło się dosłownie, ze wszystkimi instrukcjami <img> i wszystkimi innymi. Wydaje mi się, że jest to problem bezpieczeństwa w programie Thunderbird i większości klientów pocztowych - analizują przychodzącą treść mailto, aby nic nie było podejrzane.
Hannes R.

4
Najlepsze, co mogłem znaleźć, pochodzi z tej strony, zaposphere.com/html-email-links-code .. Na dole znajduje się lista: „Inne fajne dostosowania, o których większość innych stron internetowych nie wspomina !!” Bardzo mi pomógł.
Stu Andrews

Możesz ustawić każdą część wiadomości e-mail za pomocą podstawowego tekstu. Jeśli chodzi o ograniczenia, które nie są możliwe, formatowanie html, oto narzędzie, które stworzyłem, aby dostosować różne pola w mailto dead dead: mailto.now.sh
Dawson B

Odpowiedzi:


428

Jak widać w RFC 6068 , nie jest to w ogóle możliwe:

Specjalny <hfname><hfvalue> treść ” wskazuje, że powiązany jest treść wiadomości. Wartość pola „treść” ma zawierać treść pierwszej części tekstu / zwykłego tekstu wiadomości. Pole pseudo nagłówka „body” jest przeznaczone przede wszystkim do generowania krótkich wiadomości tekstowych do automatycznego przetwarzania (takich jak wiadomości „subskrybuj” do list mailingowych), a nie do ogólnych treści MIME.


4
@JoeBlow Odpowiedź jest nadal poprawna. RFC 6068, który przestarzałe 2368 nadal mówi, że treść jest zwykłym tekstem.
Markus Laire,

8
Jeśli jesteś rozczarowany tą odpowiedzią, czytaj dalej: stackoverflow.com/a/46699855/256272 (pliki tl; dr .eml)
Joe

95

Nie. W ogóle nie jest to możliwe.


1
Nie do końca prawda. Chociaż wsparcie jest bardzo rzadkie, inne odpowiedzi wykazały, że w iOS i kombinacji IE + ActiveX + Outlook jest możliwe ograniczone HTML (urgh, fuj).
Simon East

89

Chociaż NIE jest możliwe użycie HTML do sformatowania treści wiadomości e-mail, możesz dodawać podziały wierszy, jak wcześniej sugerowano.

Jeśli jesteś w stanie używać javascript, wtedy może być przydatne użycie „encodeURIComponent ()” jak poniżej ...

var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:x@y.com?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;

1
Czy klienci poczty e-mail mogą uruchamiać wbudowany Javascript? OP twierdzi, że jest to e-mail, a nie strona internetowa, na której będzie link mailto:.
wide_eyed_pupil

dzięki, w Railsach możesz użyć raw("text \n more text \n\n\t")funkcji do enkapsulacji tekstu i przekonwertować go na
podział

To działało dla mnie, wysyłając z „mailto” Chrome do Outlooka. Pamiętaj, że musisz zakodować tylko tekst podstawowy, a nie cały ciąg mailto; i nie potrzebujesz spacji przed / po \n.
Łukasz

2
Podobało mi się to podejście, oto jsfiddle, aby zobaczyć go w akcji: jsfiddle.net/oligray/5uosngy4
Oliver Gray

3
Możesz także użyć% 0A do podziału linii, więc nie musisz tego robić z JavaScript.
Dirk Boer,

58

Użyłem tego i wydaje się, że działa z programem Outlook, nie używając html, ale możesz sformatować tekst z podziałem wiersza, przynajmniej gdy treść jest dodawana jako wynik.

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

2
Zatem „% 0D” jest znakiem nowej linii. Czym jest kod zakodowanej karty?
wide_eyed_pupil

3
% 0D jest nowym wierszem, którym jest ctrl-m, tabulatorem jest ctrl-i, który jest% 09. Spójrz na wykres ASCII taki jak ten [ asciitable.com/index/asciifull.gif] . Znaki kontrolne to od 1 do 31. @wide_eyed_pupil
Jim Bergman,

2
Podczas tego procesu każdy podpis wydaje się zostać usunięty.
Valentin Despa,

% 0A byłoby \ n
Klemen Tušar

3
To nie jest treść HTML!
Chloe,

46

Nie jest to dokładnie to, czego chcesz, ale możliwe jest użycie nowoczesnego javascript do utworzenia pliku EML na kliencie i przesłania go do systemu plików użytkownika, który powinien otworzyć bogaty e-mail zawierający HTML w swoim programie pocztowym, takim jak Outlook:

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

Oto jsfiddle wiadomości e-mail zawierającej obrazy i tabele: 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);
})();

8
To fantastyczny pomysł
Greg

2
Świetny pomysł, ale tylko dla przypomnienia, w najnowszej Apple Mail plik ten zostanie otwarty, ale nie będzie edytowalny / możliwy do wysłania, działa jak rekord wysłanej wiadomości e-mail
pmarreck

1
W Apple Mail (11.2) po otwarciu pliku .eml możesz wybrać Wiadomość / Wyślij ponownie z menu (shift-cmd-D), aby przełączyć wiadomość e-mail w tryb edycji.
Jeff Collier,

31

Niektóre rzeczy są możliwe, ale nie wszystkie, powiedzmy na przykład, że chcesz łamania linii zamiast <br />używania%0D%0A

Przykład:

<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
To nie jest HTML ... wciąż tekst.
Brad

nie, jeśli sformatujesz swój e-mail za pomocą $ mailheader. = "Typ zawartości: tekst / html; charset = iso-8859-1 \ r \ n";
Stephen Kaufman,

12
@StephenKaufman - to nie ty wysyłasz wiadomość e-mail, ale klienci, którzy klikną link. Oznacza to, że nie wiesz, jak ustawiony jest klient poczty e-mail. Nie wiesz, jak są ustawione jego nagłówki. Działa to na niektórych klientach e-mail, a na innych nie.
Narxx,

1
dzięki, to była dla mnie druga najlepsza opcja, jeśli nie mogę zrobić HTML, to przynajmniej mogę zrobić powrót karetki. mi pasuje.
hamish

16

Warto zauważyć, że w Safari na iPhonie przynajmniej wstawianie podstawowych znaczników HTML, takich jak <b>, <i>i <img>(idealnie, że i tak nie należy już używać w innych okolicznościach, preferując CSS) w parametrze body mailto:wydaje się, że praca - są honorowani w kliencie e-mail. Nie przeprowadziłem wyczerpujących testów, aby sprawdzić, czy jest to obsługiwane przez inne kombinacje przeglądarki mobilnej lub stacjonarnej / klienta poczty e-mail. Wątpliwe jest również to, czy jest to rzeczywiście zgodne ze standardami. Może się jednak przydać, jeśli budujesz dla tej platformy.

Jak zauważyły ​​inne odpowiedzi, powinieneś także użyć encodeURIComponent na całym ciele przed osadzeniem go w mailto:łączu.


Tak, działa idealnie, dodając proste pogrubione, kursywowe tagi - w każdym razie w iOS.
Fattie,

W systemie iOS nie mogę wysłać poprawnego adresu e-mail za pomocą <img src = 'mybase64' /> - w Gmailu widzę base64 w mojej wiadomości.
Witalij Zdanevich,


0

Mam ten sam problem z udostępnianiem HTML. Robię dla mnie poniżej HTML. Zamień <na <&> na>.

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

Uwaga: Działa tylko w Ubuntu. To nie będzie działać w systemie Windows.


-1

Każdy może wypróbować następujące czynności (funkcja mailto akceptuje tylko zwykły tekst, ale tutaj pokazuję, jak korzystać z właściwości innertext HTML i jak dodać kotwicę jako parametry treści 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

Możliwe jest wprowadzanie wartości Unicode w celu wstawiania znaków nowej linii (tj .:), \u0009ale tagi HTML mają różne stopnie wsparcia i należy ich unikać.


-11

Pracowałem w ten sposób:

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

Dane wyjściowe byłyby:

Hello
World  
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.