008 - Save Table as CSV

CodeBrauer · Jan 8, 2017 · 8211c8c · 8211c8c
1 parent 37ccb7b
commit 8211c8c
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 0 deletions.
diff --git a/008_2017-01-08_JS_HTML-Table-to-CSV/README.md b/008_2017-01-08_JS_HTML-Table-to-CSV/README.md
@@ -0,0 +1,7 @@
+# #008 2017-01-08: Save HTML Table as CSV
+
+This script will search the table on the page, format all rows/cells into a CSV formatted string and download it as CSV file. The file is formatted with semicolon as delimiter and all columns are wrapped in double quotes.
+
+In my test, the file can be opened correctly in Excel (v2011, macOS).
+
+**Demo:** <https://codebrauer.github.io/100daysofcode/008_2017-01-08_JS_HTML-Table-to-CSV>
diff --git a/008_2017-01-08_JS_HTML-Table-to-CSV/app.css b/008_2017-01-08_JS_HTML-Table-to-CSV/app.css
@@ -0,0 +1,57 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #020A0D;
+    font-family: 'Roboto', sans-serif;
+    color: #FEB904;
+    padding: 0;
+    margin: 0;
+}
+
+h1 {
+    font-family: 'Playfair Display', serif;
+    font-size: 56px;
+}
+
+a { color: #FEB904; }
+
+.container {
+    max-width: 800px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+table { width: 100%; }
+table, td, th {
+    border-collapse: collapse;
+    border: 1px solid;
+    padding: 2px 6px;
+    text-align: left;
+}
+th { 
+    text-transform: uppercase;
+    background-color: #FEB904;
+    color: #020A0D;
+    border: none;
+}
+td:last-child {
+    text-align: right;
+}
+
+button {
+    background: #020a0d;
+    border: 2px solid;
+    color: #feb904;
+    padding: 6px 12px;
+    margin: 10px 0;
+    font-size: 16px;
+    cursor: pointer;
+    transition: color .2s ease;
+    outline: none;
+}
+
+button:hover {
+    color: #ff7a00;
+}
diff --git a/008_2017-01-08_JS_HTML-Table-to-CSV/app.js b/008_2017-01-08_JS_HTML-Table-to-CSV/app.js
@@ -0,0 +1,24 @@
+(function(){
+    var csvData = '';
+    var button = document.querySelector('button.save-as-csv');
+    button.addEventListener('click', function(e) {
+        [].forEach.call(document.querySelectorAll('table tr'), function(rows) {
+            [].forEach.call(rows.children, function(cell) {
+                csvData += JSON.stringify(cell.innerText.replace('"', '\''));
+                if (cell.nextElementSibling !== null) {
+                    csvData += ';';
+                }
+            });
+            csvData += '\n';
+        });
+        var encodedURI = encodeURI(csvData);
+        var dlLink     = document.createElement('a');
+
+        dlLink.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodedURI);
+        dlLink.setAttribute('download', 'table-data.csv');
+        dlLink.style.display = 'none';
+
+        document.body.appendChild(dlLink);
+        dlLink.click();
+    });
+})();
diff --git a/008_2017-01-08_JS_HTML-Table-to-CSV/index.html b/008_2017-01-08_JS_HTML-Table-to-CSV/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="theme-color" content="#FEB904">
+
+    <title>Save HTML Table as CSV</title>
+
+    <link href="//fonts.googleapis.com/css?family=Playfair+Display:900|Roboto" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="app.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Save HTML Table as CSV</h1>
+        <p>
+            This script will search the table on the page, format all rows/cells into a CSV formatted string and download it as CSV file. The file is formatted with semicolon as delimiter and all columns are wrapped in double quotes.<br>
+            In my test, the file can be opened correctly in Excel (v2011, macOS).
+        </p>
+        <table>
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Title</th>
+                    <th>Payment Method</th>
+                    <th>Amount</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr><td>2007-06-22</td><td>Tools</td><td>Cash</td><td>15.00</td></tr>
+                <tr><td>2008-03-27</td><td>Bottle of wine</td><td>PayPal</td><td>12.00</td></tr>
+                <tr><td>2009-07-04</td><td>Trip to Las Vegas</td><td>Cash</td><td>500.00</td></tr>
+                <tr><td>2010-12-07</td><td>Repairs</td><td>Credit Card</td><td>1050.43</td></tr>
+                <tr><td>2011-05-01</td><td>Cinema Tickets</td><td>Credit Card</td><td>35.00</td></tr>
+                <tr><td>2017-01-08</td><td>Special char test</td><td>!"'§$%&;/\-_=?0</td><td>€$¥</td></tr>
+            </tbody>
+        </table>
+        <button class="save-as-csv">Save as CSV</button>
+    </div>
+    <script src="app.js"></script>
+
+    <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-59784112-5', 'auto');ga('send', 'pageview');</script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -4,6 +4,10 @@ A repo with 100 daily small projects (from 2017-01-01 till 2017-04-17) - every d
 
 Goal: Get a better coder, face up to new challenges, improve skills!
 
+## Day 008 (JS)
+
+[[Demo]](https://codebrauer.github.io/100daysofcode/008_2017-01-08_JS_HTML-Table-to-CSV) - Save a HTML table as CSV file.
+
 ## Day 007 (JS)
 
 [[Demo]](https://codebrauer.github.io/100daysofcode/007_2017-01-07_JS_YT-API-Test/) -  Today I just tested how to get the last 10 YouTube Videos from a specific channel and display them nicely.