Member Avatar for thak123

How can i export the values of the text box in html to a csv or a excel
.I have created an HTML Form which will be used from a local computer and want the form data to be saved in CSV file.

Each time the form is submitted, it should add a line in the CSV file.

This needs to be run locally so cannot use PHP or JSP.

  • 2 Contributors
  • 2 Replies
  • 132 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by thak123

Dani AI

Generated

asked for a purely local, browser-side way to append form submissions into a CSV. correctly pointed out that browsers differ in how (and whether) they let pages touch the local filesystem. The practical, cross-browser pattern that works today is to collect/escape your form values in JS, keep them in client storage between submits (IndexedDB or localStorage), and export them as a CSV file the user can save. Where available, newer browser APIs let the user choose a file and write to it directly; where not available, trigger a download of a generated CSV blob.

Example workflow (works in most desktop and modern mobile browsers):

  • On submit, serialize and properly escape form fields, push the row into localStorage/IndexedDB.
  • When you want to persist to disk, build the CSV text, create a Blob, and trigger a download with an anchor using the download attribute so the user saves a .csv file.

Code sketch (adapt to your form and storage method):

function escapeCsv(s){
  s = s == null ? '' : String(s);
  if (/[",\n]/.test(s)) return '"' + s.replace(/"/g, '""') + '"';
  return s;
}

function downloadCsv(filename, csvText){
  const blob = new Blob([csvText], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

If you want true in-place file writes (append to the same file without the user re-saving each time), use the browser-native File System Access API where supported — it lets the user pick a file and your script write to it interactively (File System Access API). On Android, modern Chromium-based browsers often support these techniques; older Android browsers may not. For silent background writes or guaranteed device storage access, wrap the page in a native container (Cordova/Capacitor) and use their file plugins (Cordova docs, Capacitor docs).

Recommended Answers

All 2 Replies

Member Avatar for Troy III

This is easily done on IE using the FSO (file system object) locally.

For Firefox you should look into XPCOM for which there are some libs like jslib and io.js that can be used.

Member Avatar for thak123

Can this be useful on a android tab browser?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.