thanks in advance for any help you can offer. I have been digging through the various posts here on SO trying to solve a missing page break issue. I have a number of cshtml templates that are rendered using a Razor template engine to produce an RTF file. When the file is opened in Word it completely dumps the html that contains the "break" style used to make a page break. The rest of the template renders exactly as designed. I am thinking that maybe my problem is I'm not rendering out the file correctly in the first place.
Sample .cshtml file starts with:
<div style="width: 100%;" class="newpage">
<p align="center" style="text-align:center">NOTICE</p>
<table>
....middle html content....
</table>
<p class="newpage"></p>
</div>
I've tried putting the page break at the beginning and the end just to see if it made any difference and it didn't.
The razor call that gets the .cshtml file is like this:
newNotice.Body = RazorEngine.Razor.Parse(Notifications.GetTemplate(NotificationTemplate.MyTemplate2), data, NotificationTemplate.MyTemplate2.ToString());
return newNotice;
Then I render out the RTF file in the following code where the style for the page break exists:
protected void ProduceNotification(Notification notice, string title)
{
Response.Clear();
Response.Buffer = true;
Response.AddHeader("content-disposition", "attachment;filename=" + title);
Response.ContentType = "application/rtf";
EnableViewState = false;
var stringWrite = new StringWriter();
var sb = new StringBuilder();
sb.Append(#"<html>
<head>
<title></title>
<style type='text/css'>
.body {
margin: 5em;
background-color: white;
width: 100%;
height: 100%;
font-family: Calibri;
}
.spacing {
line-height: 1.5em;
}
.newpage {
mso-special-character:line-break;
page-break-before:always;
clear: both;
}
</style>
</head><body>");
sb.Append(notice.Body);
sb.Append("</body></html>");
stringWrite.WriteLine(sb);
ClearChildControlState();
Response.Write(stringWrite.ToString());
Response.End();
}
When I open up the file in Word, the page breaks are not being respected so I saved the file to .html to see what the mark up looks like and here's what I see:
In the style definition section it shows the style:
p.newpage, li.newpage, div.newpage
{mso-style-name:break;
mso-style-unhide:no;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
page-break-before:always;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
But in the document where the html should show the element with the class on it, it looks like this instead (this is in the middle of the html output):
<div>
<p align=center style='text-align:center'>NOTICE </p>
<table>
......middle html content.....
</table>
</div>
Notice that the style and class are missing from the div tag and the p tag is missing all together. What I can't figure out is, is the conversion to RTF deleting these for some reason or is it the Razor Templating Engine that's stripping out the text? I've also tried changing this to output an .doc format also but the result has been the same.
So the aggravating answer also turned out to be the simplest one. The style was applying to p, li, or div elements but only if the element has some kind of content:
<div class='newpage'> </div>
As long as I used one of the correct elements, it works as long as there is some kind of content (in this case just a space). Once I had it working, I also had to address the issue of it adding an extra blank page to the output since originally I had the line in the cshtml file itself. Instead I moved it to the code behind.
I created a var to hold the last list item, as demonstrated in this SO post here.
var lastItem = myList.Last();
foreach(var d in myList)
{
newNotice.Body += RazorEngine.Razor.Parse(Notifications.GetTemplate(NotificationTemplate.MyTemplate2), data, NotificationTemplate.MyTemplate2.ToString());
if(!ReferenceEquals(d, lastItem))
newNotice.Body += "<div class='newpage'> </div>";
}
Related
I have file in google sheets(img 1).
https://i.stack.imgur.com/1j8ny.png [1]
i wrote script which is converting marked columns to word (i need to mark only 1st 4 columns becuase its going to be on sticker) (img 2)
https://i.stack.imgur.com/GnIXo.png [2]
this is the code:
SpreadsheetApp.getUi()
.createMenu('Drukowanie odpadów')
.addItem('Drukuj zazaczone odpady - ZAZNACZ 4 pierwsze kolumny!', 'sprawdz')
.addToUi();
/**
* #NotOnlyCurrentDoc
*/
function sprawdz() { //zbiera dane z zaznaczenia (4 kolumny) w arkuszu GoogleSheet, uzupełnia GoogleDoc danymi
// otworzenie dokumentu w google Doc, do którego będą przenoszone zaznaczone kolumny
var doc = DocumentApp.openByUrl("https://docs.google.com/document/d/WORD_ID/edit");
var body = doc.getBody();
//CZYSZCZENIE ORAZ USTAWIENIE WYMIARÓW ETYKIETY
body.clear();
body.setPageHeight(100);
body.setPageWidth(260);
body.setMarginLeft(0.1);
body.setMarginRight(0.1);
body.setMarginTop(0.01);
body.setMarginBottom(0.01);
var sheet = SpreadsheetApp.getActiveSheet();
var selection = sheet.getSelection();
var data = selection.getActiveRange().getValues();
//PIERWSZE UZUPEŁNIENIE DOKUMENTU
body.getParagraphs()[0].appendText(' {nr_odpadu} {dlugosc}').setFontSize(13);
body.appendParagraph(' {kolor}').setAlignment(DocumentApp.HorizontalAlignment.LEFT).editAsText().setFontSize(10);
body.appendParagraph(' {profil}').setAlignment(DocumentApp.HorizontalAlignment.LEFT).editAsText().setFontSize(10);
body.appendParagraph(' ').setAlignment(DocumentApp.HorizontalAlignment.LEFT).editAsText().setFontSize(35);
//PETLA KTORA ZBIERA DANE Z ARKUSZA I UMIESZCZA JE W ODPOWIEDNIM MIEJSCU W DOKUMENCIE
for (var i = 0 ; i < data.length; i++) {
body.replaceText('{nr_odpadu}', data[i][0]);
body.replaceText('{profil}', data[i][1]);
body.replaceText('{kolor}', data[i][2]);
body.replaceText('{dlugosc}', data[i][3]+'mm');
//jeśli dotrzemy do końca listy, to nie ma potrzeby dalszego drukowania
if (i != data.length-1){
body.appendParagraph(' {nr_odpadu} {dlugosc}').setAlignment(DocumentApp.HorizontalAlignment.LEFT).editAsText().setFontSize(13);
body.appendParagraph(' {kolor}').setAlignment(DocumentApp.HorizontalAlignment.LEFT).editAsText().setFontSize(10);
body.appendParagraph(' {profil}').setAlignment(DocumentApp.HorizontalAlignment.LEFT).editAsText().setFontSize(10);
body.appendParagraph(' ').setAlignment(DocumentApp.HorizontalAlignment.LEFT).editAsText().setFontSize(35);
}
}
}
is there any option to insta print with printer the word document from google sheets script editor?
F.e i mark 4 columns i run the script and it print me the sticker. Im using printer "Zebra GK420t"
Im converting it to word document because when i was converting it to pdf i couldnt change page size to height 100 and weight 260 and i dontk now how to place the things like on screen 2
Or mby there is a way to insta print marked columns without creating word/pdf ?
The best approach I can think is to make an HTML page with CSS that is prepared to be printed as labels and using the browser for printing.
This means making a template and using HtmlService.createTemplateFromFile (see docs) to generate a template, which then is evaluated into a web page. Then using Ui.showModelessDialog (see docs) you show a dialog that can call window.print (see MDN reference) so you can print the contents of the iframe that contains the generated labels.
function printLabels(labels) {
const labelsPage = HtmlService.createTemplateFromFile('Labels');
labelsPage.labels = labels;
SpreadsheetApp.getUi().showModelessDialog(labelsPage.evaluate(), 'Labels');
}
Note that we are using the file Labels. Using another name won't work.
Now we have to make the template (templated HTML docs) of the labels using HTML and CSS which should be designed with printing in mind. Also we need to use JavaScript to trigger the browser's print dialog.
Since printing is hard to implement correctly and debug, and I was motivated enough, I took the time to make a version of something similar that what you have right now. Obviously you'll probably have to change it a bit. I took the sizes from your script but I don't have a label printer —and obviously not your printer— so you'll have to make some tests to ensure that everything works as it should.
<!DOCTYPE html>
<html>
<head>
<!-- Basic CSS -->
<style type="text/css">
:root {
font-family: Helvetica, sans-serif;
}
:root, html, body {
margin: 0;
padding: 0;
}
article {
padding: 5pt;
}
header {
margin: 0;
line-height: 1em;
display: flex;
justify-content: space-between;
font-size: 13pt;
}
p {
margin: 0.7em;
padding: 0;
font-size: 10pt;
}
</style>
<!-- CSS to setup the printing -->
<style type="text/css" media="print">
#page {
/* Define the size of the page (label) */
size: 260pt 100pt;
/* Remove the page information that the browser usually adds */
margin: 0;
marks: crop;
}
body > * {
/* Make sure there is 1 article per page (label) */
page-break-after: always;
}
button {
/* Hide the print button when actually printing */
display: none;
}
</style>
<!-- Script that opens the print dialog after the page has completly loaded :) -->
<script>
// Show the printing dialog
window.addEventListener('load', function() {
window.print();
})
// Close after printing
window.addEventListener('afterprint', function() {
google.script.host.close();
});
</script>
</head>
<body>
<button type="button" onclick="window.print()">Print</button>
<? for (let label of labels) { ?>
<article>
<header>
<div><?= label[0] ?></div>
<div><?= label[1] ?>mm</div>
</header>
<p><?= label[2] ?></p>
<p><?= label[3] ?></p>
</article>
<? } ?>
</body>
</html>
Now you can call printLabels with an array of labels to print (in your case the data variable should work). Notice that this will print all the labels given, so if you'd like only print 4, you'should only send 4 to that function.
References and further reading
CSS media queries (MDN)
CSS flexbox (MDN)
CSS units (MDN)
CSS #page (MDN)
Can I remove the URL from my print css, so the web address doesn't print? (StackOverflow)
google.script.host.close() (Google Apps Script reference)
Is there a way to add white space in MVC while using variables? for example foreach(item in collection) {#item #item}. How to make a blank space something like " " in it?
You can use pre tag , which defines preformatted text.
foreach(item in collection) {
<pre>#item #item</pre>
}
have you tried this can be repeated i.e. you can do line breaks with <br />
In my application I have used a space after the link's name ("Details ") as shown here
#Html.ActionLink("Details ","Details", new { Variable_ID = item.VIP_ID})
#Html.ActionLink("Edit", "Edit", new { Variable_ID = item.VIP_ID })
so my links will look like this: Details Edit, instead of DetailsEdit.
You can also put a separation bar like this "Details | ", so you can have
Details | Edit
<span> </span>
Insert " " to add more blank spaces
//This will work for sure, as MVC C# using razor syntax then you just need to put space between those two only
foreach(var item in collection) {
<span>#item #item</span>
}
If you wish to add single space between item:
foreach(item in collection)
{
<p>#item #item</p>
}
But you will have better flexibility if you wrap it in a HTML element like div or span,
and then add padding/margin to the element using CSS.
foreach(item in collection)
{
<div class="user-defined-classname">#item</div>
<div class="user-defined-classname">#item</div>
}
In CSS
.user-defined-classname{
padding-left|right|top|bottom: 10px
}
Suggestion:
The "Views" folder is specifically meant to just contain your view files (i.e. .cshtml files).
Try adding your CSS file to a folder in the root of the ASP.NET project. Often, this folder is named "Content", but you can rename it as "Styles" or something else. Then you can load your CSS file from within a view using a link tag:
<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />
This may help.
One more variant:
#(string.Format("{0} {1}", item, item))
In trying to fine-tune the appearance of my Web API page, I'm making changes to CSS classes, and adding new classes, to \Content/Site.css, yet they do not alter the appearance of the page as they should, even when I append "!important" to specific rules.
For example, I added a horizontal rule to the page, which does show up, but quite unobtrusively (with a faint, barely discernible line). So I added this .css class to Site.css:
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
...which works just fine in another project, but doesn't in this one. The line remains faint even when I append "! important" to the "height" rule there:
height: 1px !important;
I tried right-clicking the page at runtime and selecting "Reload Page" but that made no difference, either.
Other CSS changes (margins and paddings) are not having any effect, either; this is just one specific case whose resolution should work for all of them.
What do I need to do to get modified/added CSS rules to be applied?
UPDATE
Even when I, acquiescing to Algernop K's suggestion, change the code from this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr />");
. . .
...to this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style=\'size:4;\' />");
. . .
...(adding "; margin-top:48;" to the h1 element, and "size" to the hr), no change is evident.
UPDATE 2
A "funny" thing happened on the way to the Inspecting of Elements. As Chris W suggested, I right-clicked the hr element on the page, but it's so miniscule that I may have got a different element to inspect. Nevertheless, an err msg in the console may be revealing the basic problem - there it says, "bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery"
UPDATE 3
Should I explicitly add my \Content\Site.css file to the html? I tried dragging it from Solution Explorer below the lines shown above, hoping it would generate the correct code, but instead it gave me:
C:\Projects\ProActWebReports\ProActWebReports\Content\Site.css
...and a prompt to add "'System.Security.Policy.Site' and all other references in file"
Note that I have a related question here
UPDATE 4
FWIW, here's the entire (relevant) code that builds up this html:
namespace PlatypusWebReports.Controllers
{
[RoutePrefix("api")]
public class LandingPageController : ApiController
{
private string _unit;
[Route("{unit}")]
public HttpResponseMessage Get(string unit)
{
_unit = unit;
string beginningHtml = GetBeginningHTML();
string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
string fillRateHtml = GetFillRateHTML();
string priceComplianceHtml = GetPriceComplianceHTML();
string produceUsageHtml = GetProduceUsageHTML();
string endingHtml = GetEndingHTML();
String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
beginningHtml,
deliveryPerformanceHtml,
fillRateHtml,
priceComplianceHtml,
produceUsageHtml,
endingHtml);
return new HttpResponseMessage()
{
Content = new StringContent(
HtmlToDisplay,
Encoding.UTF8,
"text/html"
)
};
}
private string GetBeginningHTML()
{
StringBuilder builder = new StringBuilder();
builder.Append("<html>");
builder.Append("<head>");
builder.Append("<title>");
builder.Append(string.Format("Available Reports For {0}", _unit));
builder.Append(_unit);
builder.Append("</title>");
builder.Append("<script src='https://code.jquery.com/jquery-1.12.2.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("</head>");
builder.Append("<body class=\"body-content\" style='margin-top:0;margin-left:60;margin-right:60;'>");
builder.Append("<div class=\"jumbotronjr\">");
builder.Append("<img src=\"http://www.Platypususa.com/wp-content/themes/Platypus/images/pa_logo_notag.png\" alt=\"Platypus logo\">");
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available Platypus Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style='color:red;height:12;' />");
builder.Append("</div>");
builder.Append("</div>");
// for beginning the row div
builder.Append("<div class=\"row\">");
return builder.ToString();
}
private string GetEndingHTML()
{
StringBuilder builder = new StringBuilder();
// for ending the row div
builder.Append("</div>");
builder.Append("</body>");
builder.Append("</html>");
return builder.ToString();
}
. . .
Everything is displaying basically as I want it to, it's just not allowing me to add the "gingebread" (adding margins, hrs, shadow around the used area)
UPDATE 5
Even though _ViewStart.cshtml points to Layout:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
...and _Layout.cshtml renders (supposedly) the Styles in the Content/css folder, which contains the Sites.css which I have been adding CSS styles madly to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - PRO*ACT USA</title>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/bootstrap")
#Styles.Render("~/Content/css")
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")*#
#RenderSection("scripts", required: false)
</body>
</html>
...all that does nothing to add these styles I want. The only way seems to use inline styles:
builder.Append("<body style='margin-top:40;margin-left:60;margin-right:60;'>");
. . .
builder.Append("<hr style='border:0;height:1;background:#333;color:navy;' />");
The whole process could certainly be made much clea[n,r]er / more straightforward.
Using import.io connector, I was able to extract a segment of html from the source web site. This result is returned as "html" type. The result is a single table of data with styles defined in the body html but not extracted. This resulted in the html segment extracted displayed with NO style and looking terrible.
Is there a way to INCLUDE extracting CSS styles, i.e. multiple css hrefs included in the source html, like
<link rel="stylesheet" href="http://cdn.ideamelt.com/1.3/css/ideamelt.min.css">
Also at the same time to include dynamic css like the following:
<style type="text/css">
#financials-iframe-wrap {
width: 635px
}
.td_genTable table {
border: none
}
tr.net {
font-weight: bold;
border-top: 1px solid #009EC2
}
.td_genTable td {
border: 0;
padding: 0
}
a.h3-link {
color: #ffffff;
text-decoration: underline;
float: right
}
</style>
... in the connector extract so that the resultant html segment can be properly styled and displayed?
Thanks in advance!
This is a fairly interesting use case.
You can extract the link and style elements as html using a custom xpath such as //link and //style
You can then output them into your page HTML and that will import the css documents from the pages and should include the styling.
(Be aware that the website in question may not want you to be taking their css and using it on a different website, so they may block downloads of css to websites hosted in different domains)
Sorry, I'm not familiar with Import.io.
Is there way to get refs from links and content from styles? Are you using javascript?
If so, then you may use the folowing js functions to include your styles into the target document:
// Include css from 'style' tag
function include_css (src) {
var _head = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
style = document.createElement ('style');
style.setAttribute ('type', 'text/css');
if (style.styleSheet){
style.styleSheet.cssText = src;
} else {
style.appendChild (document.createTextNode (src));
}
_head.appendChild (style);
}
// Include css referred by 'link' tag
function include_link (ref) {
var _head = document.head || document.getElementsByTagName ('head')[0] || document.documentElement,
style = document.createElement ('link');
style.setAttribute ('rel', 'stylesheet');
style.setAttribute ('type', 'text/css');
style.setAttribute ('href', ref);
_head.appendChild (style);
}
I have a couple of mailto links in a HTML document.
<a href="mailto:etc...">
Can I insert HTML formatted body in the mailto: part of the href?
Mail me
Note that (2016) in iOS, it is perfectly fine to add <i> and <b> tags for simple italic, bold formatting.
As you can see in RFC 6068, this is not possible at all:
The special <hfname> "body" indicates that the associated <hfvalue>
is the body of the message. The "body" field value is intended to
contain the content for the first text/plain body part of the
message. The "body" pseudo header field is primarily intended for
the generation of short text messages for automatic processing (such
as "subscribe" messages for mailing lists), not for general MIME
bodies.
Whilst it is NOT possible to use HTML to format your email body you can add line breaks as has been previously suggested.
If you are able to use javascript then "encodeURIComponent()" might be of use like below...
var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:x#y.com?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;
No. This is not possible at all.
It's not quite what you want, but it's possible using modern javascript to create an EML file on the client and stream that to the user's file system, which should open a rich email containing HTML in their mail program, such as Outlook:
https://stackoverflow.com/a/27971771/8595398
Here's a jsfiddle of an email containing images and tables: 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);
})();
I have used this and it seems to work with outlook, not using html but you can format the text with line breaks at least when the body is added as output.
Email me
Some things are possible, but not all, say for example you want line breaks, instead of using <br />use %0D%0A
Example:
<img src="images/email.png" alt="EMail PDF Brochure" />
It is worth pointing out that on Safari on the iPhone, at least, inserting basic HTML tags such as <b>, <i>, and <img> (which ideally you shouldn't use in other circumstances anymore anyway, preferring CSS) into the body parameter in the mailto: does appear to work - they are honored within the email client. I haven't done exhaustive testing to see if this is supported by other mobile or desktop browser/email client combos. It's also dubious whether this is really standards-compliant. Might be useful if you are building for that platform, though.
As other responses have noted, you should also use encodeURIComponent on the entire body before embedding it in the mailto: link.
Thunderbird supports html-body: mailto:me#me.com?subject=Me&html-body=<b>ME</b>
Whilst it may not be possible within the parameter of the URL, there is a cheeky solution which allows full HTML. The concept is that you have a hidden element on the page (I am using Bootstrap and Jquery in the example below) which is temporarily revealed and the HTML copied (as per here: How to copy text from a div to clipboard). Following that, you redirect the user to the Mail link so in effect all they then have to do is hit Paste within their designated mail program. I've only tested this on Linux/Thunderbird but the paste also works into Gmail web.
<div id="copyEmailText" class="d-none"><p><strong>This is some HTML</strong>. Please hit paste when your email program opens.</p>
function copyDivToClipboard(element) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand('copy');
window.getSelection().removeAllRanges();// to deselect
}
$('#copyEmail').on('click',function(){
$('#copyEmailText').toggleClass('d-none');
copyDivToClipboard($('#copyEmailText')[0]);
window.location.href = 'mailto:?subject=Email subject text';
$('#copyEmailText').toggleClass('d-none');
})
Anybody can try the following (mailto function only accepts plaintext but here i show how to use HTML innertext properties and how to add an anchor as mailto body params):
//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