When generating a CSV file in Typescript, Blob is adding commas as separators

Currently, I am working on extracting data from a web application built with Angular 6.

In my scenario, I have an array of strings where each string represents a line in a CSV format like this:

var csvLines = ['val1,val2\n', 'val3,val4\n'...];

After adding all the necessary data to the array, I display it in the console:

https://i.sstatic.net/KulBF.png Everything shows up correctly...

Now, my goal is to convert this data into a blob and download it as a .CSV file.

The downloading part works fine, but there seems to be an issue with the output format.

When I execute the following code:

          const blob = new Blob([csvLines], {type: 'text/csv;encoding:utf-8'});
          const reader = new FileReader();
          reader.onload = () => {
            console.log(reader.result);
          };
          reader.readAsText(blob);

I end up with this unexpected output.

NOTE: Notice the commas that are added to every line except the first one - this disrupts my CSV structure. https://i.sstatic.net/1j6lG.png

Could someone shed some light on why this occurs and provide suggestions on how to prevent these extra commas?

I've attempted creating the Blob using text/plain as the MIME type and excluding the encoding, but the issue with the commas persists.

Answer â„–1

If you pass csvLines as [csvLines] to new Blob(..), you end up passing an array containing another array. The subarray appears to be combined using commas. A simple solution is to use

new Blob(csvLines, { type: 'text/csv;encoding:utf-8' });
.

const csvLines = ['val1,val2\n', 'val3,val4\n'];
const blob = new Blob(csvLines, { type: 'text/csv;encoding:utf-8' });
const reader = new FileReader();
reader.onload = () => {
  console.log(reader.result);
};
reader.readAsText(blob);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ReactJS: error occurs when trying to fetch data and encountering issues with reading properties

I am currently attempting to initiate an API call (a GET request) in order to download a document. However, I am encountering an error when making the API call: TypeError: Cannot read properties of undefined (reading 'payload') const printPin ...

search engine optimized for easy input via keyboard

I have successfully incorporated AJAX search functionality into my project, inspired by this example here. The unique feature of this implementation is the ability to navigate through search results using the TAB key. The structure of my search results tab ...

Using Google Maps to trace a line showing the distance traveled

I want to create a 'distance traveled' polyline along a set route using V3 of the Google Maps API. The polyline should pass through multiple waypoints/legs. Currently, I am using the DirectionsService to draw the entire route. In addition, I a ...

transmit a binary image to a modal using Angular

I am facing an issue with my code where I am unable to pass a binary image to a modal. The image displays correctly as a jpeg in the view, and I need it to display the same way in the modal as well. View <h4 style="color: #3953a5; font-size:22px;"&g ...

While testing my Bootstrap 3 website, I noticed that the hamburger menu was functioning correctly with the local file. However, once I hosted the site on GitHub Pages, the navbar stopped working

I recently created a test site using Bootstrap 3 (). Strangely, the hamburger menu doesn't seem to be working on this site. However, when I open the local file, the hamburger menu functions properly. Can anyone provide any insights or solutions regard ...

How to create a fresh factory instance in Angular Js

I have implemented a factory in my application to retrieve a list of folders and display it on the front end. Additionally, I have a form on the front end where users can add new folders to the existing list. After adding a folder, I need to refresh my fac ...

Why am I getting a "timepicker is not a function" error even though I have already included the timepicker CSS and JS files

I can't seem to figure out why I am receiving this error message $(...).timepicker is not a function, even though I have included the timpicker css and js files in the head section of my HTML. It was working perfectly fine before, so I'm unsure ...

Shift in the mouse's placement

While experimenting with drawing a box using raycast to track mouse position in the scene, I encountered an issue. Upon clicking, dragging, and releasing the mouse to create the box, I noticed that its position was shifting due to the canvas container&apos ...

Manipulating characters within JSON using Angular's HTTP GET request

Attempting to retrieve a JSON object from a restful service has presented some encoding issues. When entering the URL into a browser such as Firefox or Chrome, the JSON is displayed properly with UTF-8 encoding: {"name":"Université"} However, when tryin ...

The error message "TextEncoder is not defined with mongodb nodes" is indicating that there is

Encountering an issue while running jest test cases: Getting the error message - ReferenceError: TextEncoder is not defined. Current Node version being used is 14.18.0. Mongodb NPM package version is 4.1.3. Typescript version installed is 4.4.3. Here ...

Show the HTML code within the form with the identifier html-editor-form

I have four different sections which are displayed when the corresponding icon is clicked. The area labeled as visual-editor contains multiple HTML values. I am looking to showcase all the HTML values within the visual-editor class under the html-editor ...

Executing a JQuery click event without triggering a page refresh

I'm dealing with a basic form on a webpage <div class="data-form"> <p>Are you hungry?</p> <form> <label class="radio-inline"><input type="radio" name="optradio" value="yes">Yes</label> ...

Utilizing AngularJS repeaters to pass information into Foundation modals

I am currently working on creating a "members" page for a website that will feature 3 columns of pictures and names for each member. My goal is to allow users to click on a specific member's picture to access more detailed information about them throu ...

The issue of blob patterns not functioning properly in TypeScript on Windows has been causing frustration

I am facing an issue with Typescript not working properly when using blob patterns in my tsconfig.json file. Below is the content of my tsconfig.json: { "compileOnSave": false, "compilerOptions": { "declaration": false, "emi ...

Issues with sending parameters in JQuery Ajax POST request

Currently, I am delving into Ajax and encountering some issues with sending requests from the client side. I have a jsp file located at "/web" on my local server to manage requests. Though unsure if this is the best approach or if it should be handled by ...

The useStyles function does not automatically update properties in response to changes in variables

I have encountered an issue where the style of a component is not changing based on a boolean state change until I refresh the page. Here's what I'm doing: Within my parent App component, I have the following code: import React from "react"; imp ...

Using Javascript to sort through a JSON data set

Having trouble filtering a JSON using the filter method. The allProducts are returning correctly, but I can't seem to get the clubProducts to work as expected. Any assistance would be greatly appreciated. Thank you. const state = { added: [], all ...

Removing the Text Qualifier from JSON/CSV Extractor when Loading Rows into ADLA: A Step-by-Step Guide

I have a file in csv/json format that I am trying to insert into a table in ADLA. However, my data column appears as "Nike", when it should be formatted as Nike (without quotes). I attempted to use "quoting:true", but so far, this does not allow skipping ...

Is Node.js categorized as multithreading due to its utilization of worker threads?

Throughout my life, I was under the impression that Node.js and JavaScript operated as a single threaded language. It was always said that Node.js wasn't ideal for CPU intensive tasks due to its single threaded nature. Multithreading, on the other han ...

Having trouble with protractor's sendKeys function when trying to interact with md-contact-chips

Does anyone know how to set a value using sendKeys in Protractor for md-contact-chips? I attempted to use element(by.model('skills')).sendKeys('Java'); but it doesn't seem to be working. Any suggestions on how to approach this in ...