Generating download link

Ask the community
,
1

I am working on some analytics and reporting data for a website that I manage. I am trying to create a link to download a CSV file after filtering data from a dataset.

I have the function that creates a CSV file from JSON data, but I am having trouble setting the download property for a button.

I have assigned the data URI to the button with the link prop, but now I need to pass a filename and file extension to the download property. The problem is that $w(“#button”).download is not a valid prop that can be set for a button element.

Does anyone have a workaround for this? Or know a different way of accomplishing something similar?

2

I have also tried to create a custom HTML element on the page and then pass the file name and uri to it via the postMessage method, but that was unsuccessful. Code below:

<!doctype html>
<html>
	<head>
      <script type="text/javascript">
	function init() {
		window.onmessage = (event) => {
			if(event.data) {
				readyFile(event.data.fileName, event.data.uri)
			}
		}
	}
        function readyFile(fileName, uri) {
        	let link = document.getElementById("download")
            	link.href = uri
          	link.style = "visibility:hidden"
          	link.download = fileName + ".csv"
          	link.click()
        }
    </script>
</head>
<body onload="init()" style="visibility:hidden">
<a id="download"></a>
</body>
</html>

and I am using the following to send data

let fileName = "newUsers_"
fileName += ReportTitle.replace(/ /g,"_")
let uri = "data:text/csv;charset=utf-8" + escape(CSV)
setupLink(fileName, uri)
$w("#html1").postMessage({fileName, uri})
3

This post helped solve my issue.
Export custom excel files, using exceljs and file-saver npm packages | Velo by Wix