Modern Business Solutions: SharePoint & Dynamics 365: export HTML to word with word Header and footer

1. Below is HTML with word Header and Footer

<!doctype html>
<html>
<head>
<script type="text/javascript" src="../Style Library/website/jQuery-2.1.4.min.js"></script>
<script src="../Style Library/website/Print/FileSaver.js"></script>
<script src="../Style Library/website/Print/WordExport.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#btnWordExport").click(function (event) {
$("#page-content1").wordExport();
});
});
</script>
</head>
<body>
<div class="headerContent no-print">
<table class='no-print'>
<tr>
<td>
</td>
<td>
<p><input type="button" id="btnWordExport" value="Export to word" class='no-print'></p>
</td>
</tr>
</table>
</div>

<div>
<div id="page-content1">
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style>
v\:* {
behavior: url(#default#VML);
}

o\:* {
behavior: url(#default#VML);
}

w\:* {
behavior: url(#default#VML);
}

.shape {
behavior: url(#default#VML);
}
</style>
<style>
@page {
mso-page-orientation: portrait;
size: 21cm 29.7cm;
/* mso-page-orientation:portrait;
size: 29.7cm 21cm;*/
margin: 1cm 1cm 1cm 1cm;
}

@page Section1 {
mso-header-margin: .2in;
mso-footer-margin: .5in;
mso-header: h1;
mso-footer: f1;
}

div.Section1 {
page: Section1;
}

table#hrdftrtbl {
margin: 0in 0in 0in 900in;
width: 1px;
height: 1px;
overflow: hidden;
}

p.MsoFooter, li.MsoFooter, div.MsoFooter {
margin: 0in;
margin-bottom: .0001pt;
mso-pagination: widow-orphan;
tab-stops: center 3.0in right 6.0in;
font-size: 12.0pt;
}
</style>
<xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
<w:DoNotOptimizeForBrowser />
</w:WordDocument>
</xml>
</head>

<body>
<div class="Section1">
<p>

<table id="printsplit1">
<tbody id="perintbodyContent1" style="font-family:Arial;"></tbody>
</table>

</p>
<br />
<table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td>
<div style='mso-element:header;' id=h1>

<p class=MsoHeader>

<table border="0" width="100%" cellpadding="0" cellspacing="0" style="border-bottom:1px solid #736D6E">
<tr>
<td width="100%" align="center">
<img align="center" src='/sites/website/SiteAssets/logo4.png' crossOrigin='Anonymous' />
</td>

</tr>
</table>

</p>

</div>
</td>
<td>
<div style='mso-element:footer' id=f1>
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="border-top:1px solid #736D6E">
<tr>
<td width="50%" align="left">
Form Set / <label id="lblFormSetNo"></label>
</td>
<td width="50%" align="right">
<p class=MsoFooter>
<span style='mso-tab-count:2'></span>
Page <span style='mso-field-code: PAGE '>
<span style='mso-no-proof:yes'></span> from <span style='mso-field-code: NUMPAGES '></span>

</span>
</p>

</td>
</tr>
</table>

</div>
<div style='mso-element:header' id=fh1>
<p class=MsoHeader><span lang=EN-US style='mso-ansi-language:EN-US'> <o:p></o:p></span></p>
</div>
<div style='mso-element:footer' id=ff1>
<p class=MsoFooter><span lang=EN-US style='mso-ansi-language:EN-US'> <o:p></o:p></span></p>
</div>

</td>
</tr>
</table>
</div>

</body>
</html>
</div>
</div>
</body>
</html>

2. Generate HTML,which content has to be exported in Word Document

// generate Document Body in HTML
function GenerateDocumentBodyHTML() {

var singleTr = "";
var singleContentTD = "";
var singleTDQNO = "";
var contentDirection = "";
var leftPadding = "";
if (printType == "Arabic") {
contentDirection = ";direction:rtl;";
leftPadding = ";padding-right:30px;";
}
else {
leftPadding = ";padding-left:30px;";
}

//style of columns
var leftTDACSS = "style='width:100%;vertical-align: text-top;font-family:Arial;font-size:11px;border-top: 0px;border-bottom:0px;" + leftPadding + contentDirection + "'";
var leftTDBCSS = "style='width:0%;vertical-align: text-top;background:gray;color:white;" + contentDirection + "'";
//data can be any format
for (var i = 0; i < 10; i++)
{

var questionContentColumn1 = "hi testting";
var questionContentColumn2 = "hi testting";

singleContentTD = "<td " + leftTDACSS + " class='table_contentA'>" + questionContentColumn2 + "</td>";
singleTDQNO = "<td " + leftTDBCSS + " class='table_contentB'>" + questionContentColumn1 + + "</td>";

if (printType == "Arabic")
{
//add two columns in table in arabic view
singleTr = singleTr + "<tr>" + singleContentTD + singleTDQNO + "</tr>";
}
else
{
//add two columns in table in English view
singleTr = singleTr + "<tr>" + singleTDQNO + singleContentTD + "</tr>";
}
}

//append rows to body of table html for export functionality
$('#perintbodyContent1').append(singleTr);
// find img and set attribute for cross domain
$('img').each(function () {
$(this).attr('crossOrigin', 'Anonymous');
var url = $(this).attr('src');
// convert all image url to datauri
$(this).promise(callMethod($(this))).done(function (s) {
//do whatever you want here
});

});
}

function callMethod(imagepath)
{
var url = $(imagepath).attr('src');
var s = "";
convertFileToDataURLviaFileReader(url, function (base64Img)
{
$(imagepath).attr('src', base64Img);
s = base64Img;
});
return s;
}
function convertFileToDataURLviaFileReader(url, callback)
{
var xhr = new XMLHttpRequest();
xhr.onload = function ()
{
var reader = new FileReader();
reader.onloadend = function ()
{
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}

3. Below are supported js file

<script type="text/javascript" src="../Style Library/website/jQuery-2.1.4.min.js"></script>
<script src="../Style Library/website/Print/FileSaver.js"></script>
<script src="../Style Library/website/Print/WordExport.js"></script>

which can be download from below link FileSaver.js and WordExport.js

4. Result will be

Modern Business Solutions: SharePoint & Dynamics 365

Tuesday, 15 August 2017

Export HTML to MS Word document