Руководство по созданию кнопки загрузки с помощью 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
. Давайте сделаем это и посмотрим, все ли работает.
Добавить логику загрузки
Чтобы скачать файл, нам нужны четыре вещи.
- Содержимое, которое должно попасть в файл
- Файловый объект
- Ссылка для скачивания файлового объекта
- Наконец, смоделируйте, что пользователь, нажав на ссылку
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(); }
Примечания
Date.now()
— добавить временную метку к загрузкам файлов.- Файловый BLOB-объект не добавляет новую строку в
texts
автоматически. Вы можете использовать[texts.join('\n')]
, чтобы добавить новую строку
Первоначально опубликовано на https://thelearning.dev.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.