tautan mailto dengan badan HTML

319

Saya memiliki beberapa mailtotautan dalam dokumen HTML.

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

Bisakah saya memasukkan badan berformat HTML di mailto:bagian href?

<a href="mailto:[email protected]?subject=Me&body=<b>ME</b>">Mail me</a>

Perhatikan bahwa (2016) di iOS, sangat baik untuk menambahkan <i>dan memberi <b>tag untuk pemformatan huruf miring dan miring sederhana.

html email mailto GxG
sumber
1
Memiliki hal yang persis sama dalam pikiran dan mempelajarinya untuk sementara waktu. Saya mencoba untuk memasukkan remote <img> yang tertanam ke dalam badan pesan. Instruksi mailto perlu dikodekan-URL agar dapat berfungsi. Hasil dengan thunderbird adalah bahwa badan HTML muncul secara harfiah, dengan semua instruksi <img> dan semuanya. Saya kira ini adalah masalah keamanan pada thunderbird dan sebagian besar klien email - mereka mengurai isi email yang masuk sehingga tidak melakukan sesuatu yang mencurigakan.
Hannes R.
4
Yang terbaik yang bisa saya temukan berasal dari halaman ini, zaposphere.com/html-email-links-code .. Di bagian bawah memberikan daftar: "Kustomisasi keren lain yang tidak disebutkan oleh kebanyakan situs web lain !!" Banyak membantu saya.
Stu Andrews
Anda dapat mengatur setiap bagian dari email dengan teks dasar. Berkenaan dengan batasan bahwa format html tidak mungkin, berikut adalah alat yang saya buat untuk menyesuaikan berbagai bidang dalam mailto dead sederhana: mailto.now.sh
Dawson B

Jawaban:

428

Seperti yang Anda lihat di RFC 6068 , ini tidak mungkin sama sekali:

Khusus <hfname>"tubuh" menunjukkan bahwa terkait <hfvalue> adalah tubuh pesan. Nilai kolom "body" dimaksudkan untuk memuat konten untuk teks pertama / bagian tubuh polos dari pesan. Bidang header pseudo "tubuh" terutama ditujukan untuk pembuatan pesan teks pendek untuk pemrosesan otomatis (seperti pesan "berlangganan" untuk milis), bukan untuk badan MIME umum.

Alfonso Marin
sumber
4
@JoeBlow Jawab masih benar. RFC 6068 yang usang 2368 masih mengatakan bahwa tubuh adalah teks biasa.
Markus Laire
8
Jika Anda kecewa dengan jawaban ini, silakan terus membaca: stackoverflow.com/a/46699855/256272 (tl; file dr .eml)
Joe
95

Tidak. Ini tidak mungkin sama sekali.

Quentin
sumber
1
Tidak sepenuhnya benar. Meskipun dukungan sangat langka, jawaban lain menunjukkan bahwa beberapa HTML terbatas dimungkinkan di iOS dan kombinasi IE + ActiveX + Outlook (urgh, yuck).
Simon East
89

Meskipun TIDAK mungkin menggunakan HTML untuk memformat badan email Anda, Anda dapat menambahkan jeda baris seperti yang telah disarankan sebelumnya.

Jika Anda dapat menggunakan javascript maka "encodeURIComponent ()" dapat digunakan seperti di bawah ini ...

var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:[email protected]?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;
Oliver Pearmain
sumber
1
Bisakah klien email menjalankan Javascript tertanam? OP mengatakan ini adalah email bukan halaman web di mana tautan mailto: akan berada.
wide_eyed_pupil
terima kasih, di Rails Anda dapat menggunakan raw("text \n more text \n\n\t")fungsi ini untuk merangkum teks dan mengubahnya menjadi jeda baris dan tab untuk badan surel
FireDragon
Ini bekerja untuk saya, mengirim dari Chrome "mailto" ke Outlook. Perhatikan bahwa Anda hanya harus menyandikan teks isi, bukan keseluruhan string mailto; dan Anda tidak perlu spasi sebelum / sesudah \n.
Lukas
2
Saya menyukai pendekatan ini, inilah jsfiddle untuk melihatnya dalam aksi: jsfiddle.net/oligray/5uosngy4
Oliver Gray
3
Anda juga bisa menggunakan% 0A untuk linebreak, jadi Anda tidak perlu melakukannya dari JavaScript.
Dirk Boer
58

Saya telah menggunakan ini dan tampaknya berfungsi dengan pandangan, tidak menggunakan html tetapi Anda dapat memformat teks dengan jeda baris setidaknya ketika tubuh ditambahkan sebagai output.

<a href="mailto:[email protected]?subject=Hello world&body=Line one%0DLine two">Email me</a>
Andy
sumber
2
Jadi "% 0D" adalah baris baru. Apakah yang dimaksud dengan kode setara kode tab?
wide_eyed_pupil
3
% 0D adalah baris baru yang merupakan ctrl-m, tab adalah ctrl-i yang merupakan% 09. Lihatlah grafik ASCII seperti ini [ asciitable.com/index/asciifull.gif] . Karakter kontrol berasal dari 1 hingga 31. @wide_eyed_pupil
Jim Bergman
2
Tanda tangan apa pun tampaknya dihapus saat melakukan ini.
Valentin Despa
% 0A akan menjadi \ n
Klemen Tušar
3
Itu bukan badan HTML!
Chloe
46

Ini tidak seperti yang Anda inginkan, tetapi dimungkinkan menggunakan javascript modern untuk membuat file EML pada klien dan mengalirkannya ke sistem file pengguna, yang seharusnya membuka email kaya yang berisi HTML dalam program email mereka, seperti Outlook:

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

Berikut adalah jsfiddle dari email yang berisi gambar dan tabel: 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);
})();
Matius
sumber
8
Nah, itu ide yang bagus
Greg
2
Gagasan yang rapi, tetapi hanya sebagai catatan, pada Apple Mail terbaru, file ini akan terbuka tetapi tidak dapat diedit / dikirim, ini bertindak seperti catatan email yang terkirim
pmarreck
1
Dengan Apple Mail (11.2), setelah Anda membuka file .eml, Anda dapat memilih Message / Send Again dari menu (shift-cmd-D) untuk meletakkan email dalam mode edit.
Jeff Collier
31

Beberapa hal mungkin, tetapi tidak semua, katakanlah misalnya Anda ingin jeda baris, daripada menggunakan <br />penggunaan%0D%0A

Contoh: 

<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>
Stephen Kaufman
sumber
7
Itu bukan HTML ... masih teks.
Brad
tidak jika Anda memformat email Anda menggunakan $ mailheader. = "Tipe konten: teks / html; charset = iso-8859-1 \ r \ n";
Stephen Kaufman
12
@StephenKaufman - Anda bukan orang yang mengirim email, tetapi klien yang mengklik tautan. Berarti Anda tidak tahu bagaimana klien email diatur. Anda tidak tahu cara mengatur tajuknya. Ini akan berfungsi pada beberapa klien email, dan tidak pada yang lain.
Narxx
1
terima kasih, ini adalah pilihan terbaik kedua bagi saya, jika saya tidak bisa melakukan html, maka setidaknya saya bisa melakukan carriage return. baik-baik saja oleh saya.
hamish
16

Perlu menunjukkan bahwa pada Safari pada iPhone, setidaknya, memasukkan tag HTML dasar seperti <b>, <i>, dan <img>(yang idealnya Anda tidak harus menggunakan dalam keadaan lain lagi pula, lebih memilih CSS) ke dalam parameter tubuh dalam mailto:tidak muncul untuk bekerja - mereka merasa terhormat di dalam klien email. Saya belum melakukan pengujian mendalam untuk melihat apakah ini didukung oleh kombo seluler / desktop / klien email lainnya. Juga meragukan apakah ini benar-benar sesuai standar. Mungkin akan bermanfaat jika Anda membangun untuk platform itu.

Seperti tanggapan lain yang dicatat, Anda juga harus menggunakan komponen encodeURIC pada seluruh tubuh sebelum menyematkannya di mailto:tautan.

Andrew Ferrier
sumber
Ya, ini berfungsi dengan sempurna untuk menambahkan tag tebal, miring yang sederhana - di iOS.
Fattie
Di iOS saya tidak bisa mengirim email yang benar dengan <img src = 'mybase64' /> - di Gmail saya melihat base64 di dalam pesan saya.
Vitaly Zdanevich
0

Saya memiliki masalah yang sama tentang berbagi html. Saya lakukan di bawah ini pekerjaan html untuk saya. Ganti <dengan <&> dengan>.

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

Catatan: Ini hanya berfungsi di ubuntu. Ini tidak akan berfungsi di windows.

Rajan Kashiyani
sumber
-1

Siapa saja dapat mencoba yang berikut ini (fungsi mailto hanya menerima plaintext tetapi di sini saya menunjukkan cara menggunakan properti innertext HTML dan cara menambahkan jangkar sebagai params 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
Miguel Ballén
sumber
-3

Dimungkinkan untuk memasukkan nilai unicode untuk menyisipkan baris baru (yaitu:) \u0009tetapi tag HTML memiliki berbagai tingkat dukungan dan harus dihindari.

Ryan Dunphy
sumber
-11

Saya telah bekerja dengan cara ini:

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

Outputnya adalah:

Hello
World
Ravi Solanki
sumber