Export HTML To Word Document With Hyperlink In JavaScript

Html & CSS
Demo    Download
export-html-to-word-document-with-hyperlink-in-javascript
File Size: 1.09 KB
Views Total: 1296 views
Last Update:February 26, 2021
Publish Date: December 8, 2019
Official Website: Go to website
License: MIT
Plugin Author:

Export HTML to word document with javaScript can be done in different ways. JavaScript for implementing this in client side. When, the HTML file is simple include hyperlinks, then it is a simple thing to export the HTML content to a word document. I doesn’t use any third-party jQuery libraries, but with just simple JavaScript. please check with demo and download on your system.

 

Table of Contents

How to use it:

1. Include the HTML code with id name.

<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">
    <button id="btn-export" onclick="exportHTML();">Export to
        word doc</button>
</div>

2.  add java script function

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


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins