JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="hf-saveas-filedownload">

</div>

CSS

div { border: 1px solid red; width: 50px; height:50px;}
.hf-saveas-filedownload-url { padding:0px; margin:0px; display:block; width: 30px; height: 30px; border: 1px solid green;}

JavaScript

// Add SaveAs Icon to Element
        $('<span>', {
            'appendTo': $('.hf-saveas-filedownload'),
            'class': 'glyphicon glyphicon-save', 
            'css': {
                'cursor': 'pointer'
            },
            'click': function (event) {
            alert("Span");
            
                _handleCSVLinkClick(event);
            },
            'append':
                $('<a>', {
                    'class': 'hf-saveas-filedownload-url'
                })
        });

    function _handleCSVLinkClick(event) {
    event.stopPropagation();
    alert("Test");
            var urlString = "WebData/MyDownload/MyForecast/CSV/"; 

        var generateCsv = "var newWindow = window.open(\"" + urlString + "\");";

        var anchor = $('.hf-saveas-filedownload span a');
        if (anchor.length == 1) {
            anchor.attr("href", urlString);
        }

        //set off a click event to kick off download
        //alert("Clicked");
        //console.log(anchor);
        //$(anchor).trigger('click');
    }