13

I am building an application with a ReactJS front end that connects to an Express API server. Calls to the API are made using Ajax.

In one of my views, a table loads with "Export" links on each row. The Export links lead to a React route that calls an API endpoint which provides a CSV file to download.

If I hit the API endpoint directly with a valid request (outside the React app), a file download is initiated in my browser. Perfect! However, following the Export link from the React page attempts to load the view where the call to the API occurs. The table disappears from the view and is replaced by the file contents (on purpose to prove I have the data) but no file is downloaded.

Can I force a download of the contents of the response object as a file? Could this take place in the ajax success callback? I made an attempt with javascript but I'm struggling with the React virtual DOM... I assume this must be pretty straight forward but I'm stumped.

EDIT: Comments by @Blex helped me solve this issue! The solution is added to the code snippet...

Here is the JSX that receives the data:

module.exports = React.createClass({

    mixins: [Router.State],
    getInitialState: function() {
        return {
            auth: getAuthState(),
            export: [],
            passedParams: this.getParams()
        };
    },

    componentDidMount: function(){
        $.ajax({
            type: 'GET',
            url: ''+ API_URL +'/path/to/endpoint'+ this.state.passedParams.id +'/export',
            dataType: 'text',
            headers: {
                'Authorization': 'Basic ' + this.state.auth.base + ''
            },
            success: function (res) {
                // can I force a download of res here?
                console.log('Export Result Success -- ', res);
                if(this.isMounted()){
                    console.log('Export Download Data -- ', res);
                    this.setState({export: res[1]});
                    // adding the next three lines solved my problem
                    var data = new Blob([res], {type: 'text/csv'});
                    var csvURL = window.URL.createObjectURL(data);
                    //window.open(csvURL);
                    // then commenting out the window.open & replacing
                    // with this allowed a file name to be passed out
                    tempLink = document.createElement('a');
                    tempLink.href = csvURL;
                    tempLink.setAttribute('download', 'filename.csv');
                    tempLink.click();
                }
            }.bind(this),
            error: function (data) {
                console.log('Export Download Result Error -- ', data);
            }
        });
    },

    render: function(){
        console.log('exam assignment obj -- ', this.state.passedParams.name);
        var theFileContents = this.state.export;
            return(
            <div className="row test-table">
                <table className="table" >
                    <tr className="test-table-headers">
                    {theFileContents} // this loads the contents
                    // can I auto download theFileContents?
                    </tr>
                </table>
            </div>
            )
    }
});
fryeguy
  • 617
  • 1
  • 8
  • 15
  • 1
    You can do it this way: http://jsfiddle.net/8f2ah406/ The only issue here is the file name and extension need to be set manually when prompted. Otherwise, just `window.open(/* URL of the Ajax request */);` – blex Jul 03 '15 at 22:12
  • 1
    That worked perfectly! Now I just need to figure out how to set the filename auotmagically. – fryeguy Jul 03 '15 at 22:22
  • Related: http://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side/14966131#14966131 – Peeyush Kushwaha Jul 03 '15 at 22:24
  • 1
    There you go: http://jsfiddle.net/unmf5dp0/ – blex Jul 03 '15 at 22:28
  • Thanks @PeeyushKushwaha for the link. In regular javascript I think this works well. However I am working in a React JS environment the abstracts the javascript DOM away from the user. The concept of a virtual DOM is still pretty foreign to me and makes many tasks complicated. – fryeguy Jul 04 '15 at 03:59

2 Answers2

26

Adding the following code based on comments by @blex got the file download working. To see it in context, take a look at the success callback in the question.

var data = new Blob([res], {type: 'text/csv'});
var csvURL = window.URL.createObjectURL(data);
tempLink = document.createElement('a');
tempLink.href = csvURL;
tempLink.setAttribute('download', 'filename.csv');
tempLink.click();
fryeguy
  • 617
  • 1
  • 8
  • 15
  • 1
    If you append tempLink to the body it will work in Firefox too. Not sure about Safari. – jstice4all Oct 03 '18 at 15:38
  • I wouldn't use this approch atleast for the Reactjs because it will re genrate entire dom tree. – Mahesh Sep 12 '19 at 05:00
  • 1
    add `var` for `tempLink` variable – sharun k k Jan 19 '21 at 12:16
  • Is this method going to handle a file of any kind of real size? I mean, creating an object as a URL? That really going to handle a 4GB file? – DiggyJohn May 12 '21 at 19:14
  • The original post was close to six years ago, but if I remember correctly, the point of what I was trying to accomplish was to provide an option for downloading the data displayed on the page in CSV format. I suppose if I could view the data on the page, I see no reason a large file would fail. However, I'm doubtful if any of the data I was working with rose beyond several MB let alone a GB. Maybe try a test case. – fryeguy May 19 '21 at 02:21
1

I used a package jsonexport in my React app and now I am able to download the csv file on a link click. Here is what I did:

.
.
import React, {useState,useEffect} from 'react';// I am using React Hooks
import * as jsonexport from "jsonexport/dist";
.
.
.
const [filedownloadlink, setFiledownloadlink] = useState("");//To store the file download link

.
.
.

Create a function that will provide data for CSV. It can also be in a callback from a network request. When this method is called, it will set value in filedownloadlink state.

function handleSomeEvent(){
var contacts = [{
        name: 'Bob',
        lastname: 'Smith'
    },{
        name: 'James',
        lastname: 'David'
    },{
        name: 'Robert',
        lastname: 'Miller' 
    },{
        name: 'David',
        lastname: 'Martin'
    }];

    jsonexport(contacts,function(err, csv){
        if(err) return console.log(err);
        var myURL = window.URL || window.webkitURL //window.webkitURL works in Chrome and window.URL works in Firefox
        var csv = csv;  
        var blob = new Blob([csv], { type: 'text/csv' });  
        var csvUrl = myURL.createObjectURL(blob);
        setFiledownloadlink(csvUrl);
    });
}

In the render function use something like this:

{filedownloadlink &&<a download="UserExport.csv" href={filedownloadlink}>Download</a>}

The above link will be visible when filedownloadlink has some data to download.

Neo
  • 139
  • 3
  • 11