So laden Sie die Abrufantwort in der Datei als Antwort

Browser-Technologie derzeit nicht unterstützt das herunterladen einer Datei direkt aus einem Ajax-request. Die Arbeit ist ein hidden Formular aus und senden es hinter den kulissen, den browser zum auslösen der Speichern-dialog.

Bin ich mit einem standard-Flux-Implementierung, also bin ich nicht sicher, was die genaue Redux (Reducer) - code sein sollte, aber der workflow, das ich erstellt habe für einen Datei-download geht so...

1. Ich habe einen Reagieren Komponente namens FileDownload. Alle diese Komponente kann ist das Rendern einer versteckten form und dann, innerhalb componentDidMount sofort senden Sie das Formular und nennen es onDownloadComplete prop.
2. Ich habe ein anderes Reagieren Komponente, wir nennen es Widget mit einer download-Schaltfläche/Symbol (viele eigentlich... eine für jedes Element in einer Tabelle). Widget hat entsprechende Aktion, und speichern Sie die Dateien. Widget Importe FileDownload.
3. Widget hat zwei Methoden für das herunterladen: handleDownload und handleDownloadComplete.
4. Widget store hat eine Eigenschaft namens downloadPath. Es ist für die null standardmäßig. Wenn es Wert ist null gibt es keine Datei-download in progress " und die Widget Komponente nicht dazu, dass die FileDownload Komponente.
5. Klicken auf die Schaltfläche/Symbol im Widget ruft die handleDownload Methode, die Trigger eine downloadFile Aktion. Die downloadFile Aktion NICHT machen eine Ajax-Anforderung. Es löst ein DOWNLOAD_FILE Ereignis, um den Speicher zu senden, zusammen mit der downloadPath für die Datei zum download. Der store speichert die downloadPath und strahlt ein change-Ereignis.
6. Da gibt es jetzt eine downloadPathWidget machen wird FileDownload vorbei in die Requisiten-darunter downloadPath sowie die handleDownloadComplete Methode als der Wert für onDownloadComplete.
7. Wenn FileDownload gerendert wird und das Formular übermittelt wird, mit method="GET" (POST sollten auch funktionieren) und action={downloadPath}die Antwort des Servers wird jetzt auch ausgelöst werden, der browser "Speichern unter" - dialog für target-Datei herunterladen (getestet in IE 9/10, neuesten Firefox und Chrome).
8. Unmittelbar nach dem Formular Absenden, onDownloadComplete/handleDownloadComplete genannt wird. Dies löst eine weitere Aktion aus, löst ein DOWNLOAD_FILE Veranstaltung. Dieses mal jedoch downloadPath eingestellt ist null. Der store speichert die downloadPath als null und strahlt ein change-Ereignis.
9. Da gibt es nicht mehr downloadPath die FileDownload Komponente nicht gerendert Widget und die Welt ist ein glücklicher Ort.

Widget.js - teilweise code nur

import FileDownload from './FileDownload';

export default class Widget extends Component {
    constructor(props) {
        super(props);
        this.state = widgetStore.getState().toJS();
    }

    handleDownload(data) {
        widgetActions.downloadFile(data);
    }

    handleDownloadComplete() {
        widgetActions.downloadFile();
    }

    render() {
        const downloadPath = this.state.downloadPath;

        return (

            //button/icon with click bound to this.handleDownload goes here

            {downloadPath &&
                <FileDownload
                    actionPath={downloadPath}
                    onDownloadComplete={this.handleDownloadComplete}
                />
            }
        );
    }

widgetActions.js - teilweise code nur

export function downloadFile(data) {
    let downloadPath = null;

    if (data) {
        downloadPath = `${apiResource}/${data.fileName}`;
    }

    appDispatcher.dispatch({
        actionType: actionTypes.DOWNLOAD_FILE,
        downloadPath
    });
}

widgetStore.js - teilweise code nur

let store = Map({
    downloadPath: null,
    isLoading: false,
    //other store properties
});

class WidgetStore extends Store {
    constructor() {
        super();
        this.dispatchToken = appDispatcher.register(action => {
            switch (action.actionType) {
                case actionTypes.DOWNLOAD_FILE:
                    store = store.merge({
                        downloadPath: action.downloadPath,
                        isLoading: !!action.downloadPath
                    });
                    this.emitChange();
                    break;

FileDownload.js

- komplette, voll funktionsfähige code bereit für das kopieren und einfügen

- Reagieren 0.14.7 mit Babel 6.x ["es2015", "reagieren", "Stufe-0"]

- form muss display: none was die "versteckten" className ist für

import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';

function getFormInputs() {
    const {queryParams} = this.props;

    if (queryParams === undefined) {
        return null;
    }

    return Object.keys(queryParams).map((name, index) => {
        return (
            <input
                key={index}
                name={name}
                type="hidden"
                value={queryParams[name]}
            />
        );
    });
}

export default class FileDownload extends Component {

    static propTypes = {
        actionPath: PropTypes.string.isRequired,
        method: PropTypes.string,
        onDownloadComplete: PropTypes.func.isRequired,
        queryParams: PropTypes.object
    };

    static defaultProps = {
        method: 'GET'
    };

    componentDidMount() {
        ReactDOM.findDOMNode(this).submit();
        this.props.onDownloadComplete();
    }

    render() {
        const {actionPath, method} = this.props;

        return (
            <form
                action={actionPath}
                className="hidden"
                method={method}
            >
                {getFormInputs.call(this)}
            </form>
        );
    }
}

InformationsquelleAutor der Antwort Nate