<!DOCTYPE html>
<html>

<head> </head>

<body>
    <div class="output"></div>
    <button>Download CSV File</button>
    <script>
        let url;
        const feedID = "1pcFnzsPZYMdiKJgsDdkH4FFjxPBZrnGaC-BCba9EX_Q";
        const feed = "https://spreadsheet.google.com/feeds/list/" + feedID + "/1/public/values?alt=json";
        document.addEventListener("DOMContentLoaded", loadJSON);
        let myData = [
        ["Title", "Content"]
        , ["Row1", "Content1,comma"]
        , ["Row2", "Hello World"]
        , ["Row3", "JavaScript"]
    , ];
        const output = document.querySelector(".output");
        const btn = document.querySelector("button");
        btn.style.backgroundColor = "green";
        btn.style.color = "white";
        btn.style.padding = "15px";
        btn.style.fontSize = "1.5em";
        btn.addEventListener("click", function () {
            createCSV(myData);
        })

        function loadJSON() {
            fetch(feed).then(function (res) {
                return res.json()
            }).then(function (data) {
                let mainArray = [];
                let heading = [];
                let firstRun = true;
                data.feed.entry.forEach(function (item) {
                    let holder = [];
                    for (let key in item) {
                        if (key.substring(0, 3) == "gsx") {
                            if (firstRun) {
                                heading.push(key.split("$")[1]);
                            }
                            holder.push(item[key].$t);
                        }
                    }
                    if (firstRun) {
                        firstRun = false;
                        mainArray.push(heading);
                    }
                    mainArray.push(holder);
                })
                myData = mainArray;
            })
        }

        function clean(row) {
            let rep = "";
            row.forEach(function (cell, index) {
                cell = cell == null ? "" : cell.toString();
                if (cell.search(/("|,|\n)/g) >= 0) cell = '"' + cell + '"';
                //https://regexr.com/
                if (index > 0) rep += ",";
                rep += cell;
            })
            return rep;
        }

        function createCSV(data) {
            let file;
            let holder = "";
            if (url !== null) {
                window.URL.revokeObjectURL(url);
            }
            let filename = "test.csv";
            let properties = {
                type: "text/csv;charset=utf-8;"
            }
            data.forEach(function (item) {
                holder += clean(item) + "\n";
            })
            file = new File([holder], filename, properties);
            let link = document.createElement("a");
            url = window.URL.createObjectURL(file);
            link.setAttribute("href", url);
            link.setAttribute("download", filename);
            link.style.visibility = "hidden";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    </script>
</body>

</html>