Open In App

Create a Data Export and Import using HTML CSS and JavaScript

Last Updated : 05 Aug, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we are going to implement a Data Export and Import Project using HTML CSS & JavaScript. The application we are going to create will allow the user to export their data to a CSV file effortlessly and then import data back from CSV files. Whether you're managing lists or working with spreadsheets, this project will streamline your tasks.

Preview

Screenshot-2023-10-31-101158

Prerequisites

Approach

  • Start by organizing your project into a directory. Create separate files for HTML, CSS, and JavaScript. This separation helps maintain a clean and modular codebase.
  • In your HTML File create an input tag to take the input file and also create a button to export the file.
  • Enhance the user interface by applying CSS styles. Utilize CSS rules to control the appearance of elements. Proper styling enhances user experience and makes the application visually appealing. Create a separate styles.css file for this purpose.
  • In your JavaScript file (script.js), define a function for exporting data to a CSV file. This function should take the data you want to export and convert it into CSV format. Use JavaScript's File API or libraries like Parse for CSV handling.
  • Implement JavaScript logic for importing data from a CSV file. When a user uploads a CSV file, your code should be able to read and parse the file. Again, libraries like PapaParse can simplify this process.
  • Create a button in the export section of your HTML that users can click to initiate the export process. Attach an event listener to this button that calls your export function when clicked.
  • Within your import and export functions, implement the logic for handling CSV data. For exporting, convert your data into CSV format, and for importing, parse the CSV data into a usable format for your application.
     

Example: This example describes the basic implementation of the Data Export and Data Import project using HTML, CSS, and JavaScript.

HTML 
<!--Index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>CSV Viewer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <h1>GeeksforGeeks</h1>
        <input type="file" id="csv">
        <table id="table" border="1"></table>
        <br><br>
        <button id="btn">Export Data</button>
    </div>
    <script src="script.js"></script>
</body>

</html>
CSS 
/* Style.css */
* {
    margin: 0;
    padding: 0;
}
.main {
    width: max-content;
    margin: auto;
}
.main h1 {
    color: green;
    text-align: center;
}
.main input {
    margin-top: 40px;
}
.main button {
    width: max-content;
    margin: auto;
    display: block;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: green;
    border: none;
    border-radius: 6px;
    color: white;
}
.main button:hover {
    background-color: rgb(2, 105, 2);
    cursor: pointer;
}
.main button:active {
    transform: translate(0, 2px);
}
JavaScript 
// Script.js
let CSV = document.getElementById('csv');
let button = document.getElementById('btn');
CSV.addEventListener('change', (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
        const content = e.target.result;
        const rows = content.split('\n')
            .map(row => row.split(','));

        const table = 
            document.getElementById('table');
        table.innerHTML = '';

        for (let i = 0; i < rows.length; i++) {
            let tr = document.createElement('tr');
            for (let j = 0; j < rows[i].length; j++) {
                let td = document.createElement('td');
                td.textContent = rows[i][j];
                tr.appendChild(td);}
            table.appendChild(tr);}
        CSV.style.display = 'none';
        button.style.display = 'block';};

    reader.readAsText(file);
});

button.addEventListener('click', () => {
    const rows = document.querySelectorAll('#table tr');
    let csvContent = '';

    for (let i = 0; i < rows.length; i++) {
        let row = rows[i];
        let cols = row.querySelectorAll('td');
        let rowContent = '';

        for (let j = 0; j < cols.length; j++) {
            let col = cols[j];
            rowContent += col.textContent + ',';}

        csvContent += rowContent.slice(0, -1) + '\n';}

    const blob = new Blob([csvContent], 
        { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'exported_data.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
});

Output:


Create a Data Export and Import using HTML CSS and JavaScript

B

buhari12mushraf
Improve
Article Tags :

Explore

Lightbox