The Easiest Way to Export to CSV File in JavaScript

hey how's it going guys my name is Domin welcome to today's video where I'm gonna be showing you the easiest way to take some JavaScript data and convert it into CSV now you know I'm going to be showing you how to convert it into a string but also a downloadable file which I'm sure most of you probably want but if you were interested in taking an HTML table and converting it into CSV I've got a video on that which I'll be leaving in the top right corner of this video if you're interested but if not definitely stick around to watch this video instead so let me show you how to do it okay so when it comes to doing something quickly in JavaScript it most likely requires the use of a library so we're going to be using an excellent library in today's video called Json to CSV which is going to make it easier for us to of course create those CSV strings and files in JavaScript but don't worry because this library is easy to use and you can include it in existing projects or websites by simply including a script tag so we have data just like this it's an array of objects I assume you guys have a similar situation on your existing project now all of these objects have the same properties on them ID username and age so if you have a similar situation right here it's going to be very straightforward to create those CSV strings and downloadable files I'm going to be showing you both in this video so first step is going to be to include that library on the HTML let's go inside the browser right here and I'm going to be leaving a link to this page down below for you to click on once you've opened that link you'll be taken here to the Json to CSV package page now to include this on your own website simply take the script tag right here copy it and paste it at the end of your body okay right before you your main script where your data is okay so now we have the library installed how do we create some CSV well very very straightforward let's hop down here and make a new constant called CSV data equal to then simply say Json to CSV dot parse calling the parse function on its own just like this one liner is going to do the job for us let's now say data or let's pass in the data into the pass function and we're done we can now console.log the CSV data save this go in the browser go inside my index.html here I'll refresh check the console and we have the CSV right there as we can see it's included headers by default I'll show you how to turn those off but it's taken the ID username and age from the JS sorry from the JavaScript objects and included them in the header it's also wrapped the strings in double quotes to ensure if your data contains a comma that's actually part of the data or not a separator you should be fine so you know covers those situations where you might have a comma or something like that now that's a benefit of using a library right because if you were to try and create your own CSV uh you know converter you might miss those crucial things such as that comma that the library is most likely going to take care of for you all right so that right there is the first step creating that you know CSV string right but I want to show you real quickly before the file download part how you can provide some options so if you want to provide some options and customize that output we'll scroll down here go down to the options section under the JavaScript module part and you have these available options so for example you can provide your own Fields instead of it being taken from the properties you can provide a custom delimiter if you don't want the comma by default you can use a tab or space and so on you can also provide a true or false for the header row so let's do that right now I'll go back inside here or now say for the pass function put a comma and provide a object now this object is the options all right so I'll say header is false and remember this header false came from documentation right up here which says header Boolean true or false so saying header false go back in the browser refresh and we no longer get that header row at the top so feel free to explore these options and do something that works for you all right so how do we make this CSV file downloadable very straightforward and I'm going to be showing you how to do it using a button so we're going to allow your users to press download CSV and it's going to download that file to the computer so going back inside the index.html I just want to remove the example code which we just wrote so I'll backspace that then go up to the top of the body now let's think include a new button right here with a type of button and an ID of BTN download CSV just like that the label is going to be download CSV so I've got this button let's now go back in the JavaScript down below and get a reference to that button okay we can say const BTN download CSV equal to document.gets Elements by ID passing through here BTN download CSV so now of course we can do things like attach event listeners so we can make it so when the user clicks on the button we can download the file but before doing that we need to make a function in JavaScript which lets us programmatically download a file to the user's PC now this technique is very common you'll find it online in many different places but it involves a function called download something like this then it takes in two arguments you've got a file name and the actual data to download so in our case here we can call this parameter CSV data we can also call this function download CSV to be a little bit more specific but that's fine so download CSV what does this function do how does it download to the PC well it involves creating an anchor tag so just like normal links work in JavaScript you can actually make those links although anchor tags download some Simple Text data for you okay so let's create a new constant here called element equal to document.createelement here create a new anchor tag programmatically then hop down here we'll say elements.set attribute let's set the href attribute of this anchor to be a template string so using the back ticks near the one on your keyboard template strings here then just say simply data colon then text forward slash CSV then say semicolon character sets equal to UTF 8. now What's Happening Here well we're saying look this anchor tag the href okay it's not a URL instead it's a data colon which just means this right here is some data now the content type or the mime type is text forward slash CSV that is the mime type for CSV then of course the character sets utf-8 very common and most likely in your case then we just say comma okay after the comma we specify the data let's use dollar sign and then curly brackets of course this is possible due to the back ticks you know around the string then we just say CSV data inside here so providing that CSV string okay let's now say new line or you know duplicate that line set attribute file sorry my mistake download so setting the download attribute equal to the file name just means look this is downloadable and the file name to download is going to be whatever you pass in okay let's pause right here and take a look at what this actually does so let's say document dot body dot append child appends that element I'll save this go back in the browser here refresh I'll now say download CSV I'll say decode Dash test dot CSV the data can simply be something like a header one header two just an example right I'll press enter if we now check the elements go in the body we have this anchor tag the ahref is set to data Tech CSV character set and we have our CSV data at the end here header one header two right download decode test.csv so that's what's happening right we have this anchor tag this allows us to then download to the file so to the machine right so how do we do that well let's programmatically click that button in JavaScript let's say elements dot click okay save this back in the browser refresh run this function once again and it downloads it just like that I'll open it up you can see here header one header two that's all it is but it's still here in the elements so let's just remove that and also make sure that it doesn't display to the user so back in here we can also say elements dot style dot display equal to none to make sure it's hidden always then just say what's been clicked on elements.body dot remove child and pass in that element just like that I'll save this back in the browser refresh once again try it again download CSV and it's broken let's figure out why okay my mistake document.body dot remove child not just element so that's fine let's try again refresh do it and it still works perfectly fine so it's now gone from The Element Section right here and we're good to go so let's now call this function from the event listener also the source code for this is going to be linked down below so if you want to copy this code or reference it you can do so by downloading it like I said down below so how do we now of course react to the events of the click on the button very straightforward BTN download CSV dot add event listener listen for the click event when the user clicks on the button we're going to Simply call that download CSV we'll say Here download CSV the file name is going to be decode-test.csv here now I'm sure that you would probably make this a variable and it would come from somewhere else like an input field or you know something like that but the point is just an example here like I said you guys can obviously make that come from somewhere else now in terms of the data well once again you know same situation you probably want the data to come from somewhere else so um I'll let you guys work that out but for me I'm going to Simply call here json2csv dot parse and pass in that data once again just like last time and now if I save this go back in the browser refresh here press download CSV in the top left corner it downloads that file or click on it and we are done so it's downloaded that CSV and that is all for today's video I hope you guys enjoyed and you learned something if you did make sure to drop a like And subscribe to the channel and I'll see you in the next video

Channel: dcode

Views: 16,277

Keywords: how to convert to csv with javascript, how to convert json to csv, how to convert json to csv file in javascript, how to stringify csv in javascript, how to write to csv in javascript, convert array to csv in javascript, convert object to csv in javascript

Id: kGCGxRqZ6XI

Length: 12min 21sec (741 seconds)

Published: Tue Nov 22 2022