Question

我已经写了一些下面的代码片段提到的代码。它将form数据发布到服务器以下载CSV文件。 Chrome运行正常。但是，在Firefox中，调用downloadCSV函数时页面始终会重新加载。

以下a元素包含在我的组件之一中。单击它会触发downloadCSV函数。

<a ref='downloadAnchor' onClick={this.downloadCsv.bind(this)}>
    <i className='fa fa-download' />
    Download as CSV
</a>

和功能

function downloadCsv() {
    const query = {
        name: 'someName',
        age: 'someAge',
        bla: 'blabla',
        someOtherField: 'bla'
    };

    const form = document.createElement('form');
    form.setAttribute('action', 'some_url');
    form.setAttribute('method', 'post');
    form.addEventListener('submit', e => {
        e.preventDefault();
        e.stopPropagation();
        return false;
    });

    // _ is lodash
    _.forEach(query, (v, k) => {
        const input = document.createElement('input');
        input.setAttribute('type', 'hidden');
        input.setAttribute('name', k);
        input.setAttribute('value', v);

        form.appendChild(input);
    });

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

Answer 1

解决方案是@UllasHunka和@Tholle的评论的组合。工作代码如下所示：

function downloadCsv(event) {
    // ----->
    event.preventDefault();

    const query = {
        name: 'someName',
        age: 'someAge',
        bla: 'blabla',
        someOtherField: 'bla'
    };

    const form = document.createElement('form');
    form.setAttribute('action', 'some_url');
    form.setAttribute('method', 'post');
    // ----->
    form.setAttribute('target', '_blank');

    form.addEventListener('submit', e => {
        e.preventDefault();
        e.stopPropagation();
        return false;
    });

    // remove limit to get all logs
    query.limit = 0;

     _.forEach(query, (v, k) => {
         const input = document.createElement('input');
         input.setAttribute('type', 'hidden');
         input.setAttribute('name', k);
         input.setAttribute('value', v);

         form.appendChild(input);
    });

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

反应：阻止表单提交在Firefox上不起作用

1 个答案: