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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...