How to store HTML user input data into excel using javascript

Question

I need to create HTML page with JavaScript which can store user information into excel directly. Information can contain user input fields like:

First Name (Datatype: Text)
Last Name (Data Type: Text)

I have tried below code for storing values into CSV but I don't know how to store value in excel sheet.

<hrml>
  <head>
     <script language="javascript">
        function WriteToFile(passForm) {
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var fileLoc = "D:\\sample.csv";
        var file  = fso.OpenTextFile(fileLoc, 8, true,0);
        file.writeline(passForm.FirstName.value + ',' +
                 passForm.LastName.value);
        file.Close();
        alert('File created successfully at location: ' + fileLoc);
      }

    </script>
 </head>
 <body>
 <p>create a csv file with following details -</p>
 <form>
    Type your first name: <input type="text" name="FirstName" size="20">
    Type your last name: <input type="text" name="LastName" size="20">
    <input type="button" value="submit" onclick="WriteToFile(this.form)">
 </form>
</body>
</html>

Kindly help me for this "How to write HTML input data into Excel using JavaScript"

Thank you so much in advance.

Hi, I have updated my post actually I have tried store HTML value into CSV but I could not able to understand how to store value into Excel sheet. Please help me for the same. Thank you so much in advance. — Vitthal Gaytonde
– Vitthal Gaytonde, Commented Jul 22, 2015 at 13:45
This is going to be your best bet: datatables.net/extensions/tabletools — Bryan Mudge
– Bryan Mudge, Commented Jul 22, 2015 at 13:46

Ricardo Pontual · Accepted Answer · 2015-07-22 14:43:00Z

1

You can generate a semicolon separated var with your data and use the window.open function, here is an example:

var data = '';
data += $('#Name').val() + ';'
data += $('#EmployeeID').val();
data += '\r\n';
window.open( "data:application/vnd.ms-excel;charset=utf-8," + encodeURIComponent(data));

You can also generate a formatted html instead a semicolon separated text.

edited Jul 22, 2015 at 14:43

answered Jul 22, 2015 at 14:01

Ricardo Pontual

3,7573 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yavor Ivanov · Accepted Answer · 2015-07-22 13:51:55Z

0

This one uses ActiveX object to write to files on your PC. It will work only on IE. This is forbidden in browsers by default.

Here's the "normal" use case and how you would be able to complete this with all browsers:

Get form's data (JavaScript)
Make an AJAX request to the server with the data (JavaScript)
The server should have some logic to get the data and write it to a file (Excel file) (JavaScript, PHP, Java, C#, 1000s more....)

If you want it to work everywhere, you should put some efforts to create some server too. You may start the server on your local machine so you'll have files saved locally

answered Jul 22, 2015 at 13:51

Yavor Ivanov

1193 bronze badges

Comments

Ernesto Mario · Accepted Answer · 2015-07-22 13:56:05Z

0

you can create an automation object (in windows) using ActiveXObject() in your javascript code. example:

var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
// a text is stored in the first cell  
ExcelSheet.ActiveSheet.Cells(1,1).Value = "Texto1";
// the sheet is saved
ExcelSheet.SaveAs("D:\\TEST.XLS");
// close Excel with the Quit() method of the Application object 
ExcelSheet.Application.Quit();

answered Jul 22, 2015 at 13:56

Ernesto Mario

12 bronze badges

Comments

Deepu Namboodiri · Accepted Answer · 2023-03-31 03:58:36Z

//This code appends the names of each field along with the values of 
//each form element

// you can create a form with an export button at the end and 
//call this function onclick

function exportToExcel() {
  // Get the form data
  var formData = document.forms["myForm"].elements;
  var csvData = [];
  
  // Get the field names
  var fieldNames = [];
  for (var i = 0; i < formData.length; i++) {
    fieldNames.push(formData[i].name);
  }
  
  // Add the field names to the CSV data
  csvData.push('"' + fieldNames.join('","') + '"');

  // Loop through the form fields and build the CSV data
  var row = [];
  for (var i = 0; i < formData.length; i++) {
    var fieldValue = formData[i].value;
    fieldValue = fieldValue.replace(/"/g, '""');
    row.push('"' + fieldValue + '"');
  }
  
  // Add the row to the CSV data
  csvData.push(row.join(","));

  // Convert the CSV data to a string and encode it for download
  var csvString = csvData.join("\n");
  var encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvString);

  // Create a temporary link element and click it to trigger the download
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "form-data.csv");
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

Collectives™ on Stack Overflow

How to store HTML user input data into excel using javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related