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

Popular posts from this blog

User Authentication schemes in a Multi-Tenant SaaS Application

User Authentication in Multi-Tenant SaaS Apps Introduction We will cover few scenarios that we can follow to perform the user authentication in a Multi-Tenant SaaS application. Scenario 1 - Global Users Authentication with Tenancy and Tenant forwarding In this scheme, we have the SaaS Provider Authentication gateway that takes care of Authentication of the users by performing the following steps Tenant Identification User Authentication User Authorization Forwarding the user to the tenant application / tenant pages in the SaaS App This demands that the SaaS provider authentication gateway be a scalable microservice that can take care of the load across all tenants. The database partitioning (horizontal or other means) is left upto the SaaS provider Service. Scenario 2 - Global Tenant Identification and User Authentication forwarding   In the above scenario, the tenant identification happens on part of the SaaS provider Tenant Identification gateway. Post which, ...
Post a Comment
Read more

Handling exceptions in the Executor service threads in Java

Introduction This is a continuation post on the exception handling strategies in the threads in Java. For Introduction, please read this post The second post is available here This post addresses the problem statement "How to use the exception handlers in the threads spawned by the Executor Service in Java?" Not all times, we will be using Thread  classes to run our threads because we have to manage a lot of the underlying logic for managing threads. There is ExecutorService in Java which comes to the rescue for the above problem. In the previous posts, we have discussed on how to handle the exceptions in plain threads. However, when using executor service, we do not create / manage threads, so how do we handle exception in this case. We have a ThreadFactory   as an argument which can be used to customize the way threads are created for use within the ExecutorService . The below snippet of code leverages this feature to illustrate the exception handling, wherein we creat...
Post a Comment
Read more

Upgrade from http1.1 to http2 for Java spring boot applications hosted in tomcat

In this post, we will list down the tasks to be done for enabling the HTTP 2.0 support in spring boot applications which are hosted in Apache tomcat webserver Application Level Changes Spring boot Application Configuration Changes server.http2.enabled=true In the spring boot application's application.properties file, we have to add the above line so that Spring boot can add the support for http2 Tomcat server configuration In the tomcat web server, we should have SSL enabled before doing the below change. To start with, we have to shutdown the tomcat server instance that is running CD to the directory that has tomcat installed and cd to the bin directory and run the below command sh shutdown.sh We have add the UpgradeProtocol  which adds the respective Http2Protocol handler classname to the connector pipeline that enables support for http2.0 <UpgradeProtocol className="org.apache.coyote.http2.Http2Protocol" /> The above UpgradeProtocol can be added to the connec...
Post a Comment
Read more

SFTP and File Upload in SFTP using C# and Tamir. SShSharp

The right choice of SFTP Server for Windows OS Follow the following steps, 1. Download the server version from here . The application is here 2. Provide the Username, password and root path, i.e. the ftp destination. 3. The screen shot is given below for reference. 4. Now download the CoreFTP client from this link 5. The client settings will be as in this screen shot: 6. Now the code to upload files via SFTP will be as follows. //ip of the local machine and the username and password along with the file to be uploaded via SFTP. FileUploadUsingSftp("172.24.120.87", "ftpserveruser", "123456", @"D:\", @"Web.config"); private static void FileUploadUsingSftp(string FtpAddress, string FtpUserName, string FtpPassword, string FilePath, string FileName) { Sftp sftp = null; try { // Create instance for Sftp to upload given files using given credentials sf...
2 comments
Read more