StreetForum/server/web/project/static/js/index.js

async function download() {
    let id = document.getElementById('select-game').value
    if (id.length === 0){
        return
    }

    document.getElementById('loading-field').style.display = 'inline-block'


    let response = await $.get(`/api/get_images/${id}`);
    let images = response.data;

    document.getElementById('loading-field').style.display = 'none'

    let zip = new JSZip();

    // Add csv file
    let csv_content = html_to_csv(id);
    zip.file("game.csv", csv_content);

    // Generate a directory within the Zip file structure
    let img = zip.folder("images");

    // Add a file to the directory, in this case an image with data URI as contents
    for (let [key, game] of Object.entries(images)) {
        for (let sub_key in game) {
            let url = game[sub_key]
            let idx = url.indexOf('base64,') + 'base64,'.length; // or = 28 if you're sure about the prefix
            let content = game[sub_key].substring(idx);
            img.file(`Game-${key}_Image-${parseInt(sub_key) + 1}.png`, content, {base64: true});
        }
    }

    // Generate the zip file asynchronously
    zip.generateAsync({type: "blob"})
        .then(function (content) {
            // Force down of the Zip file
            saveAs(content, `Game_${id}.zip`);
        });
}

/**
 * EXPORT FUNCTION
 */

function html_to_csv(id) {
    let data = [];
    let rows = document.querySelectorAll("#table tr");

    for (let i = 0; i < rows.length; i++) {
        let row = [], cols = rows[i].querySelectorAll("td, th");

        //only select rows from selected game id or if its the header row
        if (cols[0].innerText !== id && i !== 0){
            continue
        }

        for (let j = 0; j < cols.length; j++) {
            row.push(cols[j].innerText);
        }

        data.push(row.join(";"));
    }

    let csv = data.join("\n");
    return csv
}