1

I am trying to learn how to put in a html page a local .csv file using javascript. I am using the Electron framework, and I aim to handle everything locally. What I need to do is:

  • Read the CSV file.
  • Be able to change the datas (delete rows for exemple)
  • Use innerHTML to insert the csv data into a div. My problem is in reading the CSV file. All of the examples I have found I think will only work if there is a web server running, which I prefer to avoid.
Thebootfinder
  • 11
  • 1
  • 2
  • Have you tried this https://www.papaparse.com/ – phuwin Jan 22 '20 at 14:22
  • I think you need to load the file into memory first, alter it and then provide the base64 encoded content in a link. Here's an article how to read the data https://www.html5rocks.com/en/tutorials/file/dndfiles/ and here's how to create a downloadable file - https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server – Frank Jan 22 '20 at 14:34

1 Answers1

1

You can try this papapase.com. Below is a simple example:

const data = [];
const fileInput = document.querySelector('.fileInput');
fileInput.addEventListener('change', () => {
  Papa.parse(fileInput.files[0], {
    download: true,
    header: true,
    keepEmptyRows: false,
    skipEmptyLines: true,
    step: function(row) {
      data.push(row.data);
    },
    complete: function(results) {
      document.querySelector("code").innerHTML = JSON.stringify(data);
      console.log(data);
    }
  });
});
<script src="https://www.papaparse.com/resources/js/papaparse.js"></script>
<input type="file" class="fileInput" />
<br>
<code>

</code>
phuwin
  • 3,130
  • 4
  • 26
  • 49