Dashboards & Visualizations

How to download search result into local computer using js?

pramit46
Contributor

In my dashboard, I have a download button which, on click, is supposed to run a search in the background and let me download the results in my local computer (unlike outputcsv, which stores the file in the server).

What is the best way to achieve this by using a javascript (this is mandatory)?

0 Karma
1 Solution

harshpatel
Contributor

What you can do is add onclick listener on that button which runs Search using splunk JS stack from JS and let JS do the magic:

require([
    "jquery",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/simplexml/ready!"
], function ($, SearchManager) {

    // creating search manager
    var mySearch1 = new SearchManager({
        id: "mysearch1",
        earliest_time: "-24h@h",
        latest_time: "now",
        search: "index=_internal | head 100 | stats count by source",
        autostart: false
    });

    $("#downloadButton").on("click", function () {
        // run search manager
        mySearch1.startSearch();
        var myResults = mySearch1.data("results");
        myResults.on("data", function () {
            var data = myResults.collection().toJSON();
            console.log(data);
            // download data as file
            var hiddenElement = document.createElement('a');
            hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(data, null, 2));
            hiddenElement.target = '_blank';
            hiddenElement.download = 'myFile.txt';
            hiddenElement.click();
        });
    });
});

View solution in original post

harshpatel
Contributor

What you can do is add onclick listener on that button which runs Search using splunk JS stack from JS and let JS do the magic:

require([
    "jquery",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/simplexml/ready!"
], function ($, SearchManager) {

    // creating search manager
    var mySearch1 = new SearchManager({
        id: "mysearch1",
        earliest_time: "-24h@h",
        latest_time: "now",
        search: "index=_internal | head 100 | stats count by source",
        autostart: false
    });

    $("#downloadButton").on("click", function () {
        // run search manager
        mySearch1.startSearch();
        var myResults = mySearch1.data("results");
        myResults.on("data", function () {
            var data = myResults.collection().toJSON();
            console.log(data);
            // download data as file
            var hiddenElement = document.createElement('a');
            hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(data, null, 2));
            hiddenElement.target = '_blank';
            hiddenElement.download = 'myFile.txt';
            hiddenElement.click();
        });
    });
});

pramit46
Contributor

Awesome!!!!!
This helps a lot. Thanks a lot @harshpatel . By the way, one small question. How do I convert this data into CSV? The user may not like the JSON format.

0 Karma

harshpatel
Contributor

In that case, I think what you should do is use myResults.data().fields + myResults.data().rows instead of myResults.collection().toJSON() it is already in the format of CSV you just need to iterate and store into one string variable.

0 Karma
Get Updates on the Splunk Community!

Get the T-shirt to Prove You Survived Splunk University Bootcamp

As if Splunk University, in Las Vegas, in-person, with three days of bootcamps and labs weren’t enough, now ...

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Wondering How to Build Resiliency in the Cloud?

IT leaders are choosing Splunk Cloud as an ideal cloud transformation platform to drive business resilience,  ...