Export Infopath Form to Word - SharePoint Store

To export any HTML to word you can you JQuery Word Export. Here I will show you how to convert Infopath Form to Word

The JQuery requires a container containing html, but you can modify it to take the html as in input instead of the JQuery container

Here is my Code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
</head>

<body>
    <button onclick="return Download()" value="Download" type="button">Download</button>
    <div id="content" style="background-color:white"></div>
    <div id="editor"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" type="text/javascript"></script>
    <script src="/sites/joel/SiteAssets/InfopathPOC/FileSaver.js" type="text/javascript"></script>
    <script src="/sites/joel/SiteAssets/InfopathPOC/jquery.wordexport.js" type="text/javascript"></script>
    <script type="text/javascript">
        var html;
        $.ajax({
            type: 'GET',
            url: '<siteURL>/<Infopath Library>/<Infopath Form>.xml?NoRedirect=true',
            datatype: 'xml',
            cache: false,
            contentType: "text/xml; charset=\"utf-8\"",
            success: function(xmlContent) {
                html = '<div id="tableformat"><table>';
                for (var i = 0; i < xmlContent.children[0].children.length; i++) {
                    var element = xmlContent.children[0].children[i];
                    html += '<tr>';
                    html += '<td >';
                    html += element.localName;
                    html += '</td>';
                    if (element.localName == "ColorTest") {
                        html += '<td style="background-color:' + element.textContent + ';color:white">'
                        html += element.textContent;
                    } else if (element.localName == "ImageTest1") {
                        html += '<td>';
                        if (element.textContent == "Red")
                            html += '<img src="/sites/joel/SiteCollectionImages/red.png"/>';
                    } else if (element.localName == "ImageTest2") {
                        html += '<td>';
                        if (element.textContent == "Coffee")
                            html += '<img src="/sites/joel/SiteCollectionImages/coffee.png"/>';
                    } else {
                        html += '<td>';
                    }
                    html += '</td>';
                    html += '</tr>';
                }
                html += '</table></div>';
                $el = $(html).find("#tableformat"); // Here i have created a temporary container without actually rendering the HTML as i dont want to render it on a page
                $test = $el.prevObject;
            },
            error: function() {
                console.log('failed');
            }
        });

        function Download() {
            $($test).wordExport();
            return false;
        }
    </script>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Untitled 1</title>

</head>

<body>

<button onclick="return Download()" value="Download" type="button">Download</button>

var html;

$.ajax({

type: 'GET',

url: '<siteURL>/<Infopath Library>/<Infopath Form>.xml?NoRedirect=true',

datatype: 'xml',

cache: false,

contentType: "text/xml; charset=\"utf-8\"",

success: function(xmlContent) {

html = '<div id="tableformat"><table>';

for (var i = 0; i < xmlContent.children[0].children.length; i++) {

var element = xmlContent.children[0].children[i];

html += '<tr>';

html += '<td >';

html += element.localName;

html += '</td>';

if (element.localName == "ColorTest") {

html += '<td style="background-color:' + element.textContent + ';color:white">'

html += element.textContent;

} else if (element.localName == "ImageTest1") {

html += '<td>';

if (element.textContent == "Red")

html += '<img src="/sites/joel/SiteCollectionImages/red.png"/>';

} else if (element.localName == "ImageTest2") {

html += '<td>';

if (element.textContent == "Coffee")

html += '<img src="/sites/joel/SiteCollectionImages/coffee.png"/>';

} else {

html += '<td>';

}

html += '</td>';

html += '</tr>';

}

html += '</table></div>';

$el = $(html).find("#tableformat"); // Here i have created a temporary container without actually rendering the HTML as i dont want to render it on a page

$test = $el.prevObject;

error: function() {

console.log('failed');

}

});

function Download() {

$($test).wordExport();

return false;

}

</script>

</body>

</html>

Leave a Reply Cancel reply