Как сделать скачивание файла?

Question

[asus18019]

Всем привет, хочу сделать скачивание файла. У меня на бекенде есть роут ('127.0.0.1:8000/api/export/users') который скачивает файл. Хочу чтобы по нажатию на кнопку скачивался файл.

import React from "react";

const ImportExport = () => {
    const download = async () => {
        console.log('asdasdsd')
        const response = await fetch('http://127.0.0.1:8000/api/export/users', {
            method: 'GET',
            headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest',},
            credentials: 'include',
        });
        const content = await response.json();
        console.log(content)
    }
    return(
        <div className="ImportExportComponent">
            <div className="IEButton">
                <button type="button" className="btn btn-primary btn-lg" onClick={() => download()}>Export</button>
            </div>
            <div className="IEButton">
                <button type="button" className="btn btn-primary btn-lg">Import</button>
            </div>
        </div>
    )
}

export default ImportExport;

В ответе у меня такое

Comments

[n1ksON]

Пока что у вас ошибка о том, что кривой JSON

[asus18019]

n1ksON, удалил

const content = await response.json();
        console.log(content)

теперь нет ошибок с Json

Answer 1

[n1ksON]

const download = () => {
          const url = window.URL.createObjectURL(new Blob([buffer]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "image.png");
          document.body.appendChild(link);
          link.click();
}

<button onclick={download}>DOWNLOAD</button>

Comments

[asus18019]

const download = () => {
        const url = window.URL.createObjectURL(new Blob(['127.0.0.1:8000/api/export/users']));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", 'users-collection.xlsx');
        document.body.appendChild(link);
        link.click();
    }

Написал так, у меня скачивается текстовый файл user-collection.xlsx.txt , внутри него записано "127.0.0.1:8000/api/export/users", а я хочу чтобы файл был в формате .xlsx и внутри было то, что отвечает сервер

[n1ksON]

Чтобы задать формат:

new Blob(['127.0.0.1:8000/api/export/users'], {type: "text/xlsx"})

А чтобы внутри было то, что отвечает сервер, просто задав URL адрес в строке - не получится. Нужно сделать запрос по API и ответ вставить вместо '127.0.0.1:8000/api/export/users'