How to export an HTML table to a CSV file in JavaScript - Project Video 

Thank you! I'm glad I could help. Enjoy your project 👍

Cheers!

No worries mate, thank you for the video idea from your comment a while back!

No probs!

Glad you enjoyed my friend.

Love it mate!

No worries mate happy it helped ya!

Cheers!

@@dcode-software Kiwi ?? - Just saw your home page... you've got a lot of really good stuff in there. Much Respect.

Aussie mate

@@dcode-software Ok.... no worries.. I'm Aussie and thought I heard a slight hint of kiwi.

Hahaaha fair enough 😁

Hey mate no worries, the font is Roboto Mono

Oh tanks, I was checking the font but it doesn't looks like roboto mono... I forget to mention but the font I was asking before was the one that you use in the html page.

Hey Tonatiuh, To answer your first question about multiple tables, the simplest solution would be to make multiple instances of the TableCSVExporter and extract the text for each table. Then you can build up one massive string variable and append the result for each table to it, separated by a new line. You'd just need to make sure you take into account the different row lengths for each table. To answer your second question about selecting out of input fields, this would be quite straight forward assuming your element is within your element. To do so, within the "parseCell" method of TableCSVExporter you can change the parsedValue to instead say something like "tableCell.querySelector("input").value" - this way it's going to select the input within the table cell and grab it's value.

@@dcode-software Thank you so much for your reply! I'm still confused on how exactly to get multiple tables into the 'csvOutput' constant...could you provide some clarity on that?

I had a look at your Stack Overflow question which you posted in another comment - the "parseCell" function takes in a *single* cell, so you probably shouldn't be selecting ALL inputs/selects within it - but rather selecting a single one (the input/select which is a child of the given table cell). To answer your second question about multiple tables - you could create a new TableCSVExporter for each table and call the "convertToCSV" function. The function simply returns a string so you could have a variable that holds ALL the output and simply loop through all your tables, and append the return value of "convertToCSV" to your variable.

@@dcode-softwareAh, I understand about parseCell...I did kind of MacGyver my way to a solution by using the spread operator and an array to capture all of the and values. I'm still stuck on getting multiple tables onto a single row in the CSV file...I've got it to a point where all user-inputted text is captured and written to the CSV file, though it's a mess, with values offset by a column and such, though it is all there. Just for a bit of background, the app itself is a with 11 elements nested within. What I essentially need to figure out is how to get each to append to a new set of columns -- essentially looking something like ..., and then all the relevant row or rows of data. If I have it just take one table, it's writes to the CSV just fine. It's when I try adding the additional 10 tables that things get messy. Might the solution to this lie somewhere in the _findLongestRowLength() method? Either way, I'm beyond floored at your generosity in taking the time to get back to me about this. I'm a new developer that is working on landing their first position and thus am very comfortable being transparent about my current inexperience. I indeed hope I'm not coming off as trying to get you to do my work for me. The limiting factor in all this is, like I mentioned, the lack of experience, so I'm working hard to piece the logic together and understand the how and why behind the code you've written. I sincerely hope this exchange benefits anyone else that may reading this comment thread and helps them adapt your code to fit their needs as well. You've definitely helped me a ton with fighting the 'imposter-syndrome' dragon. Thank you, Dominic!

No worries man, with the multiple tables situation - before saving the CSV you'll need to append the "resulting CSV string" for each table onto one another. For example, "combinedCsv = table1Csv + table2Csv + table3Csv" - then you would export only the combined CSV.

Yeah so basically to support IE avoid using classes and also (I believe) the Array.from method. You could just put everything into a function instead or a regular object.

@@dcode-software Thank you. I will check that out when testing.

@@dcode-software Hi, would you mind put up a version that works with IE? I have been searching and there isn't really many examples. This one is by far more clean and works pretty well with Chrome, but not IE. Would really appreciate it. Thanks.

You're welcome! No need to pay me back

Hey, cheers. A few people have asked me about this, I'll consider it!

@@dcode-software Thanks, i actually figured i out after an hour of posting the question..

Me too facing the same issue, how did you solve the pagination problem? TIA

Probably best to do that on the server side with something like a command line application that will convert to PDF from HTML. There's a good selection of free and open source ones

Yeah mate sorry about that, it should be there now!

Hey! So I actually posted this question to StackOverflow and in the process of it all I figured out how to get those values! Check it out: stackoverflow.com/questions/61945465/how-would-you-go-about-grabbing-an-input-elements-value-when-that-input-ele

A few people have asked for this, I may be doing a video on it in future.

jk solved it ;']

Really? I made sure I tested this on Firefox before uploading the video ☹️

@@dcode-software Yes, your pen doesn't work on FF 🙄

You could, but this video is about exporting to CSV :)

@@dcode-software Are you a kiwi? you sound like one!

Nah Aussie mate