Skip to main content

Download CSV file using JavaScript fetch API

Downloading a CSV File from an API Using JavaScript Fetch API: A Step-by-Step Guide

Introduction: Downloading files from an API is a common task in web development. This article walks you through the process of downloading a CSV file from an API using the Fetch API in JavaScript. We'll cover the basics of making API requests and handling file downloads, complete with a sample code snippet.

Prerequisites: Ensure you have a basic understanding of JavaScript and web APIs. No additional libraries are required for this tutorial.

Step 1: Creating the HTML Structure: Start by creating a simple HTML structure that includes a button to initiate the file download.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV File Download</title>
</head>
<body>
    <button id="downloadButton">Download CSV</button>
    <script src="script.js"></script>
</body>
</html>

Step 2: Writing JavaScript Code: Create a JavaScript file named script.js and write the code to download the CSV file using the Fetch API.

// Select the download button
const downloadButton = document.getElementById("downloadButton");

// Define the API URL for the CSV file
const apiUrl = "https://api.example.com/download/csv";

// Function to trigger file download
async function downloadCSV() {
    try {
        const response = await fetch(apiUrl);
        const blob = await response.blob();

        // Create a URL for the blob
        const blobUrl = URL.createObjectURL(blob);

        // Create a temporary anchor element
        const link = document.createElement("a");
        link.href = blobUrl;
        link.download = "data.csv";
        link.style.display = "none";

        // Append the anchor element to the body and click it
        document.body.appendChild(link);
        link.click();

        // Clean up
        document.body.removeChild(link);
        URL.revokeObjectURL(blobUrl);
    } catch (error) {
        console.error("Error downloading CSV:", error);
    }
}

// Attach click event listener to the button
downloadButton.addEventListener("click", downloadCSV);

Step 3: Explanation of the Code:

  • We select the download button element using document.getElementById.
  • Inside the downloadCSV function, we use the Fetch API to make a request to the API URL. We await the response and convert it to a Blob object, which represents binary data.
  • We create a URL for the Blob using URL.createObjectURL.
  • A temporary anchor (<a>) element is created and configured to download the CSV file. We set its href to the blob URL and download attribute to specify the filename.
  • The anchor element is appended to the document body and programmatically clicked to initiate the download.
  • Finally, the anchor element is removed, and the blob URL is revoked to free up resources.

Step 4: Testing the Code: Open the HTML file in a web browser. Clicking the "Download CSV" button will trigger the API request and download the CSV file to the user's device.

Conclusion: Using the Fetch API, you can easily download files from APIs in your web applications. This step-by-step guide demonstrated how to download a CSV file using the Fetch API, providing a seamless way to retrieve and save files from remote sources. Feel free to adapt this approach for different file types and use cases in your projects.

Labels:

Comments

Post a Comment