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!

.conf23 Registration is Now Open!

Time to toss the .conf-etti 🎉 —  .conf23 registration is open!   Join us in Las Vegas July 17-20 for ...

Don't wait! Accept the Mission Possible: Splunk Adoption Challenge Now and Win ...

Attention everyone! We have exciting news to share! We are recruiting new members for the Mission Possible: ...

Unify Your SecOps with Splunk Mission Control

In today’s post, I'm excited to share some recent Splunk Mission Control innovations. With Splunk Mission ...