Export HTML to Word Document with JavaScript

If you want to export HTML content to Microsoft Word document, without plugins or libraries, but with just simple JavaScript, continue reading this article.

Generally, the export function is used to download the contents of the web page as a file and save it for offline use. The Microsoft Word or Doc (.doc) format is perfect for exporting HTML information to a file. Export-to-doc features can be readily introduced without server-side interaction. There is a client-side option for exporting HTML to a word document using JavaScript.

Client-side export to Doc features makes the web application easy to use. The user can export a particular portion of the material of the web page without refreshing the site. In this tutorial, we’ll explain to you how to export HTML to a JavaScript doc. The JavaScript export functionality can be used to download content from a web page or to download particular div content from a doc / Docx file.

Table of Contents

Source HTML with Export button

Wrap the HTML content in a container you want to export to MS Word document (.doc).


<button onclick="ExportToDoc('exportContent');">Export as .doc</button>
<div id="exportContent">
<h1>
        <center>CodersFever</center>
    </h1>
    <h2>Easy Learing Plateform</h2>
    <p>
       CodesFever emerged from the concept that there is a category of readers who respond best to online web content and prefer to learn new skills from the comforts of their drawing rooms at their own place.</p>
<p>
Individual, corporate and academic members have access to learn anything on codesfever.com likes video tutorials, blogs content etc. From many years, we worked our way to adding new fresh articles on topics ranging from programming languages that helps students, leaders, IT and design professionals, project managers or anyone who is working with software development, creatives and business skills.
    </p>
<div>

<button onclick="ExportToDoc('exportContent');">Export as .doc</button>

<h1>

<center>CodersFever</center>

</h1>

<h2>Easy Learing Plateform</h2>

<p>

CodesFever emerged from the concept that there is a category of readers who respond best to online web content and prefer to learn new skills from the comforts of their drawing rooms at their own place.</p>

<p>

Individual, corporate and academic members have access to learn anything on codesfever.com likes video tutorials, blogs content etc. From many years, we worked our way to adding new fresh articles on topics ranging from programming languages that helps students, leaders, IT and design professionals, project managers or anyone who is working with software development, creatives and business skills.

</p>

<div>

JavaScript Function to Export HTML Document

The ExportToDoc() function converts HTML content to word or export a particular part of a web page with pictures and downloads it as a Doc file (.doc).

element – Required. Specify the element ID to export content from.
filename – Optional. Specify the file name of the word document.


<script>
function ExportToDoc(element, filename = ''){
    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 html = header+document.getElementById(element).innerHTML+footer;

    var blob = new Blob(['\ufeff', html], {
        type: 'application/msword'
    });
    
    // Specify link url
    var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
    
    // Specify file name
    filename = filename?filename+'.docx':'document.docx';
    
    // 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);
}
</script>

function ExportToDoc(element, filename = ''){

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 html = header+document.getElementById(element).innerHTML+footer;

var blob = new Blob(['\ufeff', html], {

type: 'application/msword'

});

// Specify link url

var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);

// Specify file name

filename = filename?filename+'.docx':'document.docx';

// 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);

}

</script>

The click event is programmed to download a word document containing the exported HTML information.

Trigger ExportToDoc() function to export HTML content as .doc file using JavaScript.


<button onclick="ExportToDoc('exportContent');">Export as .doc</button>

<button onclick="ExportToDoc('exportContent');">Export as .doc</button>

If you want to export HTML with your custom file name, then you need to pass your desired file name in the ExportToDoc() function.


<button onclick="ExportToDoc('exportContent','custom-file-name');">Export as .doc</button>

<button onclick="ExportToDoc('exportContent','custom-file-name');">Export as .doc</button>

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co