Руководство по созданию кнопки загрузки с помощью React.

Когда я создавал 100 идей, я хотел дать пользователям возможность экспортировать свой контент в текстовый файл. Это было очень просто. Этот пост — попытка поделиться этими знаниями и записать их на будущее. Предполагая, что вы уже знакомы с основами React, давайте начнем.

Создать кнопку

<div className="btnDiv">
     <button id="downloadBtn" value="download">Download</button>
</div>

Добавить обработчик событий

const downloadTxtFile = () => {
    console.log("download logic goes here")
}
<div className="btnDiv">
     <button id="downloadBtn" onClick={downloadTxtFile} value="download">Download</button>
</div>

Далее нам нужно привязать обработчик события к событию кнопки onClick. Давайте сделаем это и посмотрим, все ли работает.

Добавить логику загрузки

Чтобы скачать файл, нам нужны четыре вещи.

  1. Содержимое, которое должно попасть в файл
  2. Файловый объект
  3. Ссылка для скачивания файлового объекта
  4. Наконец, смоделируйте, что пользователь, нажав на ссылку
const downloadTxtFile = () => {
    // text content
    const texts = ["line 1", "line 2", "line 3"]
// file object
    const file = new Blob(texts, {type: 'text/plain'});
// anchor link
    const element = document.createElement("a");
    element.href = URL.createObjectURL(file);
    element.download = "100ideas-" + Date.now() + ".txt";
// simulate link click
    document.body.appendChild(element); // Required for this to work in FireFox
    element.click();
}

Примечания

  1. Date.now() — добавить временную метку к загрузкам файлов.
  2. Файловый BLOB-объект не добавляет новую строку в texts автоматически. Вы можете использовать [texts.join('\n')], чтобы добавить новую строку

Первоначально опубликовано на https://thelearning.dev.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.