Скачать строку в формате.txt в React

Question

У меня есть строка, которая должна быть загружена в txt файл при нажатии на кнопку. Как это можно реализовать с помощью React?

Answer 1

Вот рабочий пример. Введите текст в поле ввода и нажмите Download txt, это загрузит txt с содержанием, которое вы ввели во вход.

Это решение создает новый объект Blob из text MIME типа и прикрепляет его к href временного якоря (<a>) элемент, который затем запускается программно.

Объект Blob представляет собой файлоподобный объект неизменяемых необработанных данных. BLOB-объекты представляют данные, которые не обязательно имеют собственный формат JavaScript.

---

class MyApp extends React.Component {
  _downloadTxtFile = () => {
    var element = document.createElement("a");
    var file = new Blob([document.getElementById('myInput').value], {type: 'text/plain'});
    element.href = URL.createObjectURL(file);
    element.download = "myFile.txt";
    element.click();
  }
  
  render() {
    return (
      <div>
        <input id="myInput" />
        <button onClick={this._downloadTxtFile}>Download txt</button>
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>

Этот ответ был получен из сообщения thanhpk.

Answer 2

Вот рабочий пример использования React с хуками и стрелочными функциями:

      const DownloadButton = ({textOutput}: { textOutput: string }) => {
    const file = new Blob([textOutput], {type: 'text/plain'});

    return (
            <Button variant="outlined">
                <a download="sample.txt" target="_blank" rel="noreferrer" href={URL.createObjectURL(file)} style={{
                    textDecoration: "inherit",
                    color: "inherit",
                }}>Download</a>
            </Button>
    )
}

Примечание. Я использую библиотеку MUI и добавил некоторые стили, чтобы тег привязки не мешал стилю.