Html to MS Word using JS without Header and Footer

Question

I am trying to convert HTML page into MS Word document file with help of below code. My problem is I don't want any header and footer in it. I want to create word file without header and footer extra spaces. Content should be sticky to the top.

I am getting the results but I don't want header and footer in it.

 function Export2Doc(element, filename = ''){
           
           var preHtml = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="utf-8"><title>Export HTML To Doc</title><style>body,html{margin-top: 0px !important;padding-top: 0px !important;padding-left: 0px !important;margin-left: 0px !important;font-size: 12px;margin-left: 0px !important;}.scheduledtxt{font-size: 14.5px;}table{margin: auto 0px !important;}</head><body>';
           
            var postHtml="</body></html>";
            var html = preHtml+document.getElementById(element).innerHTML+postHtml.trim();
            
            var blob = new Blob(['\ufeff', html], {
                type: 'application/msword'
            });
    
            // Specify link url
            var url = 'data:application/msword;charset=utf-8,' + encodeURIComponent(html);
            
            // Specify file name
            filename = "test.doc";
            
            // Create download link element
            var downloadLink = document.createElement("a");
        
            document.body.appendChild(downloadLink);
    
            if(navigator.msSaveOrOpenBlob ){
                navigator.msSaveOrOpenBlob(blob, filename);
            }else{
                // Create a link to the file
                downloadLink.href = url;
                
                // Setting the file name
                downloadLink.download = filename;
                
                //triggering the function
                downloadLink.click();
            }
            
            document.body.removeChild(downloadLink);
        }

<span id="exportContent">
     <h2 style="text-align: center;">Test Document</h2>
</span>
     
     <div style="text-align: center;">
        <button id="hiddenBtn" style="background: royalblue; color: white;padding: 10px; border-radius: 10px;" onclick="Export2Doc('exportContent', 'word-content');">Export as .doc</button>
      </div>

score 0 · Accepted Answer · answered Jul 10 '20 at 12:06

I have manage to achieve my goal with the following link css print mode: display header and footer only on first page of a generated word doc

I just had to add below css code. for better understanding just minify entire code and use when converting to the word file.

@page {
        size: 2cm 2.7cmt;
        margin: 0.4cm 0cm 0cm 0cm;
        mso-page-orientation: portrait;
        mso-header: none;
        mso-footer: none;
    }

Html to MS Word using JS without Header and Footer

1 Answers1