Convert HTML to Word DOC where I have input field

user_4080319 0
Viewed 1144

The issue with the converting from HTML to DOC is with the input field. Is it possible to extract to DOC only value from input field but not the whole element directly from browser?

Example HTML:

    <html>
<head>
<title>How to Export HTML to Word Document with JavaScript</title>

</head>
<body>
<div class="source-html-outer">
    <div id="source-html">
        <h1>
            <center>Artificial Intelligence</center>
        </h1>
        <h2>Overview</h2>
        <p>
            Artificial Intelligence(AI) is an emerging technology
            demonstrating machine intelligence. The sub studies like <u><i>Neural
                    Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u>
            are the parts of AI. This technology is expected to be a
            prime part of the real world in all levels.

        </p>
    <input type="text" value="123456" />
  <input type="text" value="123456" style="margin-left: 150px;"/>
    </div>
    <div class="content-footer">
        <button id="btn-export" onclick="exportHTML();">Export to word
            doc</button>
    </div>
</div>

Javascript code that I'm using:

function exportHTML(){
   var header = "<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 Word Document with JavaScript</title></head><body>";
   var footer = "</body></html>";
   var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;
   
   var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
   var fileDownload = document.createElement("a");
   document.body.appendChild(fileDownload);
   fileDownload.href = source;
   fileDownload.download = 'document.doc';
   fileDownload.click();
   document.body.removeChild(fileDownload);
}

Exported doc looks like this, but I would love to export it without input field (just the value) enter image description here

Please check the JSFIDDLE link for the sample app: https://jsfiddle.net/0cLp8q9e/

html javascript
2 Answers

You can move those input out from the elements that will render your DOC document. In order to print the values of those input you can create different element and put it there:

function exportHTML(){    
    // Add inputs values to the document before it rendered:
    var inputs = document.querySelectorAll('input');
    for (var i=0; i < inputs.length; i++) {
        let ps = document.createElement('p');
        document.getElementById("source-html").appendChild(ps)
        ps.textContent = inputs[i].value;
    }

    // continue with your code
   var header = "<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 Word Document with JavaScript</title></head><body>";
   var footer = "</body></html>";
   var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;
   
   var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
   var fileDownload = document.createElement("a");
   document.body.appendChild(fileDownload);
   fileDownload.href = source;
   fileDownload.download = 'document.doc';
   fileDownload.click();
   document.body.removeChild(fileDownload);
}
<body>
<div class="source-html-outer">
    <div id="source-html">
        <h1>
            <center>Artificial Intelligence</center>
        </h1>
        <h2>Overview</h2>
        <p>
            Artificial Intelligence(AI) is an emerging technology
            demonstrating machine intelligence. The sub studies like <u><i>Neural
                    Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u>
            are the parts of AI. This technology is expected to be a
            prime part of the real world in all levels.
        </p>        
        
    </div>
    <div class="content-footer">
        <!-- move this form the div you convert to DOC-->
        <input type="text" value="123456" />
        <input type="text" value="123456" style="margin-left: 150px;"/>
        <button id="btn-export" onclick="exportHTML();">Export to word
            doc</button>
    </div>
</div>

Note: This snippet doesn't work on this site. Copy and paste it to your machine.

user_65250810

I would consider using regex to find and replace the input fields with their raw values. You can use the capture groups to get the value of the input box as per the below example.

This would have the added advantage of not being destructive to the page.

let re = /(\w+)\s(\w+)/;
let str = 'John Smith';
let newstr = str.replace(re, '$2, $1');
console.log(newstr);  // Smith, John

user_57298550
Related