I'd like to create an email from a Javascript web application. I'm completely aware of the many SO questions on this (e.g. Open Outlook HTML with Chrome). There are problems with the typical answers:
Mailto: link: This will let you create an email, but only in plain text (no HTML) and it does not allow for attachments.
Activex: IE only, my application needs to run in Firefox and Chrome too. FF & Chrome plug-ins to allow ActiveX are security hazards and seem to be buggy.
Server-side sends via SMTP: The email does not end up in the "Sent" folder for the user. Plus hurdles letting the user edit HTML in the browser and attach files.
Create an Outlook .MSG file: There seem to be no libraries and little written about doing this. Apparently the file format actually has an entire FAT file storage system embedded.
Key differences between many other SO questions and mine:
I cannot be the first web app developer to face this and yet I'm unable to find a solution either commercial or open source.
Update:
I used the EML file method and it works well so far. Here's my JS code to create and trigger it:
var emlContent = "data:message/rfc822 eml;charset=utf-8,"; emlContent += 'To: '+emailTo+'\n'; emlContent += 'Subject: '+emailSubject+'\n'; emlContent += 'X-Unsent: 1'+'\n'; emlContent += 'Content-Type: text/html'+'\n'; emlContent += ''+'\n'; emlContent += htmlDocument; var encodedUri = encodeURI(emlContent); //encode spaces etc like a url var a = document.createElement('a'); //make a link in document var linkText = document.createTextNode("fileLink"); a.appendChild(linkText); a.href = encodedUri; a.id = 'fileLink'; a.download = 'filename.eml'; a.style = "display:none;"; //hidden link document.body.appendChild(a); document.getElementById('fileLink').click(); //click the link
MSG file format is documented, but it is certainly not fun... Why not create an EML (MIME) file?
The suggestion is to use the EML (MIME) format. According to the OP, they considered the MSG file format (#4), but was discouraged due to complexity or lack of JS libraries that process that format. If MSG file was considered, MIME is a much better choice - it is text based, so no special libraries are required to create it. Outlook will be able to open it just as easily as an MSG file.
To make sure it is treated as an unsent message by Outlook, set the X-Unsent
MIME header to 1.
The simplest EML file would look like the following:
To: Joe The User <[email protected]> Subject: Test EML message X-Unsent: 1 Content-Type: text/html <html> <body> Test message with <b>bold</b> text. </body> </html>
Using the idea of plain text eml files, I came up with this: http://jsfiddle.net/CalvT/un3hapej/
This is an edit of something I found - to create a .txt
file then download it. As .eml
files are practically .txt files, I figured this would work. And it does. I've left the textarea
with the sample email in so you can easily test. When you click on create file, it then gives you a download link to download your .eml
file. The only hurdle I can see is making the browser open the .eml
file after it has been downloaded.
EDIT: And thinking about it, as you have access to the client machines, you could set the browser to always open files of that type. For instance in Chrome, you can click on the arrow beside the download and select always open files of this type.
Here's the code
HTML:
(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); })();
<textarea id="textbox" style="width: 300px; height: 200px;"> To: User <[email protected]> Subject: Subject X-Unsent: 1 Content-Type: text/html <html> <body> Test message </body> </html> </textarea> <button id="create">Create file</button> <a download="message.eml" id="downloadlink" style="display: none">Download</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With