Populate word document from html form

Question

I am new to web development and need your help to figure out how to use the form in HTML and use the data to populate the said field in a word document. Any advice on how to approach this problem is highly appreciated. It would really help if you could post a live example for the below. Please,do let me know if any further explanation is required.

What have you tried? Stack Overflow is not a full-code writing service. We can help you with code where you are stuck or running into issues. Asking for a full working example of proposed functionality is not what SO is for. — disinfor, Sep 20 '22 at 15:30
Hi, thanks for your response. However, I am very new to web development. I need your help to at least guide me toward a learning path so I could solve this particular problem on my own. thanks again. — jarvis, Sep 20 '22 at 15:43
If you are going to use Java for your service there are many libraries present to the word file generation one for them is Apache POI. Implement the backend rest api and call them from your frontend. — Rishal, Sep 29 '22 at 19:27

score 1 · Answer 1 · answered Sep 23 '22 at 12:06

As a new developer, I want to advise you that you are getting into some challenging territory here and many of the solutions might require some heavy experience with programming and MS Word. In this forum, there are many options you can try, but from what I gather you will need to learn about macros.

The second option you could try are some services that will do this for you for a fee. Here are two options. Check out Formstack or Jotform

If you use this type of service, you would create a form action within your html code that will merge the data from the form into the Microsoft Word Document using merge tags.

The third option you can try is using Javascript within the form to populate the Word Document. The code would look more like this:

function Export2Word(element, filename = ''){
    var preHtml = "<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 Doc</title></head><body>";
    var postHtml = "</body></html>";
    var html = preHtml+document.getElementById(element).innerHTML+postHtml;

    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+'.doc':'document.doc';
    
    // 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);
}
Export HTML Table Data to Excel using JavaScript

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

<div id="exportContent">
    <!-- Your content here -->
</div>

Last option would be using PHP, and I recommend watching this video by CodexWorld and reviewing the post that goes along with it here. This is a challenging concept, so I would encourage you to take your time.

Hopefully this will help and best of luck.

score 0 · Answer 2 · answered Sep 23 '22 at 11:31

Well, I don't know how to exactly do that, I am also a beginner like you. What seems to help you might be connecting your form with Google Sheets. The Google Spread Sheet will store all data submitted via your form. You can then use this data wherever you want.

There is an open source project for this task, you can do that by following the steps stated here: https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server

You can see it in action here: https://nisootech.vercel.app/#contact-me

Rishal · Answer 3 · 2022-09-29T19:48:09.540

There are two parts in your application

Enabling user to input the values in frontend. Which you can build using any frontend technology stack eg: HTML and Plain Javascript(Required for calling the Services), React JS, Angular etc.
Backend Service which will basically does the heavy work
1. Receiving the input from user.
2. Creating Word file using any libraries such as
  - Generate word files using Apache POI ,
  - Using Node.js to generate dynamic word document using Database value
3. Downloading the file after its completely generated using the values supplied by user.
  - download a file from Spring boot rest service
  - how to download file in react js

For the Backend service you can use technologies like Java and Springboot, Python, Node Js etc.

Building Restful webservices using spring

Use Technology in which you are more comfortable and start building. These Links and documentation you can use to start from basic.

Suggest you to breakdown your problems focus on each specific areas and do the development as per your smaller problems and integrate them later.

Populate word document from html form

3 Answers3