Export HTML To Word Document With Hyperlink In JavaScript

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

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.

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>
Thanks for make jQuery plugin is developed by Vincy For more Helpfull for users, please check the demo page or visit the official website.

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.