How to save data from HTML to excel, on click on “submit” button of form?

Question

<form>
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

I want onclick "submit" it should save first name and last name in Excel sheet. I don't want to use database and I don't have any server. I read somewhere that we can do the same in CSV. Help me out.

Thanks in advance.

Answer 1

A possible way is to create an html table. You can set the form values into an invisible table and simulate the download of html table with a link. Excel reads the html and display the data.

---

Example :

 function exportF() { //Format your table with form data document.getElementById("input").innerHTML = document.getElementById("text").value; var table = document.getElementById("table"); var html = table.outerHTML; var url = 'data:application/vnd.ms-excel,' + escape(html); // Set your html table into url var link = document.getElementById("downloadLink"); link.setAttribute("href", url); link.setAttribute("download", "export.xls"); // Choose the file name link.click(); // Download your excel file return false; } 

 <form onsubmit="return exportF()"> <input id="text" type="text" /> <input type="submit" /> </form> <table id="table" style="display: none"> <tr> <td id="input"> </td> </tr> </table> <a style="display: none" id="downloadLink"></a> 

Answer 2

有多种库可以生成.xlsx文件，您需要选择其中一个（Google xlsx.js ），在提交时读出表单中的值，然后使用选择的库创建所需的电子表格。