SharePoint & Dynamic365 Solution: Export HTML to MS Word document

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

4 comments:

yakogan13 June 2019 at 17:13
This comment has been removed by the author.
yakogan13 June 2019 at 17:15
Hello Sir,
I really like your website and tutorials espacially this tutorial I am just learning developing . Can you please make this tutorial step by step on how to use this script with DEMO because I tried to use it but did not work and I said probably I need to change source scr="" but still does not work so How can I use this script to export HTMl as Docx ? and thanks in advance .
Arun2 October 2019 at 14:38
Hi bro, I'm getting some issues, when the content goes more than half page then I'm getting an empty page at last in the created document

Tuesday, 15 August 2017

Export HTML to MS Word document

4 comments: