Menu
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)
Please check the JSFIDDLE link for the sample app: https://jsfiddle.net/0cLp8q9e/
929
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.
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
