JSFiddle - React, Tailwind, and code Playground

HTML

From data attribute of self:
<div id="data" data-obj='{"obj-1": "text-1","obj-2": "text-2","obj-3": "text-3"}'>Download Me</div>

<br><br>
    
From data attribute of span:
<span id="a-data"></span>
<span id="obj-data" data-obj2='{"obj-1": "text-1","obj-2": "text-2","obj-3": "text-3"}'></span>

CSS

#data, #a-data {
    cursor: pointer;
    display: inline;
    color: blue;
}

JavaScript

$("#data").click(function () {
	alert( JSON.stringify($(this).data("obj")) );
    
    // How to download from clicking $(this)
    
});

var obj = $("#obj-data").data("obj2");
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
$('<a href="data:' + data + '" download="data.json">Download Me</a>').appendTo("#a-data");