如何在 React js 中下载一种流文件？

Question

我想在我的项目中下载一个流文件。实际上 API 的响应就像一个 blob。我在这里留下我的代码；

id 和 filterBody 作为道具到达我的组件。

真的我很困惑，如果有些地方有错误或没有？任何人都可以帮助我找到我的错误吗？谢谢。

const fetchBlobFile = async (setBlobFile, id, filterBody) => {
    try {
        let response = await get(`http://localhost:4000/error/table/export?error_id=${id}`, filterBody)
        setBlobFile(response?.data?.blob())
    } catch (error) {
    }
}

function exportXslFile ({id, filterBody}) {
    const [blobFile, setBlobFile] = useState(null)

useEffect(() => {
        fetchBlobFile(setBlobFile, id, filterBody)
    }, [id])

    const export = () => {
        const url = window.URL.createObjectURL(blobFile);
        window.location = url
    }
return (
<button className="export" onClick={export}><ExportXslFile /> Export</button>
)

}

Answer 1

我解决了如下问题。这段代码完全有效；但只注意导入必要的包。

const fetchBlobFile = async (setBlobFileLoading, id, body) => {
    try {
        const a = document.createElement("a");
        a.style.display = "none";
        document.body.appendChild(a);
        setBlobFileLoading(true);
        var data = JSON.stringify(body);

        var config = {
            method: 'post',
            url: `http://localhost:4000/table/export?errorCsv_id=${id}`,
            headers: {
                'Content-Type': 'application/json'
            },
            data: data
        };

        let response = await axios(config);
        setBlobFileLoading(false)
        const blobFile = new Blob([response?.data], { type: 'text/csv' });
        const url = window.URL.createObjectURL(blobFile);
        a.href = url;
        a.download = fileName; 
        a.click();
        window.URL.revokeObjectURL(url);
    } catch (error) {

    }
}

function exportXslFile ({id, body}) {

const [blobFileLoading, setBlobFileLoading] = useState(false)


    const export = () => {
fetchBlobFile(setBlobFileLoading, id, filterBody)
    }
return (
{blobFileLoading && <div className="loading fixed"><Loader /></div>} // set up loader
<button className="export" onClick={export}>Export</button> 
) //download button

}

如何在 React js 中下载一种流文件？

How to download a kind of stream file in React js?

blob

download

reactjs