Много раз на наших сайтах нам нужно сделать кнопку доступной для пользователей, чтобы они могли загружать содержимое страницы.
Иногда нам нужно загрузить таблицу, график или, в более общем случае, элемент div. с нашей страницы.
В этом руководстве мы обсудим, как в проекте React это можно будет сделать через библиотеку html2canvas.
Вы готовы? Следуйте за мной шаг за шагом и в конце статьи дайте мне знать, что вы думаете 🫶
Подготовка нашей среды
Для создания нового одностраничного приложения в React необходимы три принципиальных момента:
- базовые знания JavaScript;
- Узел ≥ v16
- npm ≥ v8
К настоящему времени мы можем создать наш «скриншот-проект», выполнив следующие шаги в вашем терминале:
npx create-react-app screenshot-project cd screenshot-project npm start
Это может занять несколько секунд ☕… создается новый проект со всеми необходимыми установленными зависимостями.
Чистый автоматически сгенерированный код
После создания проекта наши папки полны бесполезного кода для нашей цели.
По этой причине мы собираемся удалить все, что не полезно для нашего проекта.
Приступим к удалению всего содержимого файла src/App.css и убедимся, что файл src/App.js выглядит следующим образом:
function App() {
return (
<div>Hello world!</div>
);
}
export default App;
Начнем 🚀
Внутри папки node_modules установлены все зависимости нашего проекта, кроме той, которая позволяет сделать скриншот элемента в нашем представлении.
Поэтому нам нужно установить библиотеку html2canvas, выполнив следующую команду в нашем терминале:
npm install html2canvas --save
Эта команда установит библиотеку html2canvas.
Команда --save добавит имя библиотеки в дерево зависимостей в файле package.json.
Интересующие нас данные 🔍
Теперь, когда наш проект настроен, мы можем создать HTML div, который мы хотим загрузить как изображение.
Поэтому давайте заменим Hello world! в строке 3 следующим кодом:
<div id="table-container">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Bob</td>
<td>40</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</div>
В этом коде мы создали div с id из table-container, который содержит таблицу с некоторыми фиктивными данными. Мы будем использовать этот div для создания изображения, которое можно загрузить.
Как? 🕵️♂️
Нам нужно создать функцию, которая будет генерировать изображение и позволит нам его загрузить. Мы можем сделать это, используя библиотеку html2canvas.
Вот код внутри функции App():
import html2canvas from 'html2canvas';
function App() {
const downloadImage = () => {
const table = document.getElementById('table-container');
html2canvas(table).then(function (canvas) {
const link = document.createElement('a');
link.download = 'table.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
}
return (
<div id="table-container">
[...]
</div>
);
}
export default App;
В этом коде мы импортировали библиотеку html2canvas и создали функцию с именем downloadImage. Эта функция получает table-container div, используя document.getElementById.
Затем мы передаем этот div функции html2canvas, которая генерирует элемент холста из содержимого файла div.
После этого мы создаем элемент ссылки, используя document.createElement, и устанавливаем для его атрибута download значение table.png. Затем мы устанавливаем атрибут href на URL-адрес данных холста, используя canvas.toDataURL('image/png').
Пришло время сделать снимок! 📸
Теперь, когда у нас есть функция загрузки, мы можем добавить кнопку в наш компонент React, которая позволит нам активировать функцию и загрузить изображение.
Перед добавлением новой кнопки не забудьте обернуть table-container div пустым фрагментом.
<>
<div id="table-container">
[...]
</div>
<button onClick={downloadImage}>Download Image</button>
</>
Добавьте немного стиля🎨
Прежде чем сделать снимок, мы все поправляем куртку, прическу и позу. По этой причине, прежде чем создавать наше изображение, давайте добавим немного CSS в файл App.css.
#table-container {
padding: 20px;
}
#table-container table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#table-container table td, #table-container table th {
border: 1px solid #ddd;
padding: 8px;
}
#table-container table tr:nth-child(even){
background-color: #f2f2f2;
}
#table-container table tr:hover {
background-color: #ddd;
}
#table-container table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
button {
margin: 20px;
background: #7aedc1;
height: 50px;
border: 2px solid #09a96d;
border-radius: 15px;
cursor: pointer;
color: #444;
}
На данный момент остается только импортировать файл CSS вApp.js
import './App.css';
Протестируйте приложение🪤…, нажав кнопку Загрузить изображение, чтобы загрузить изображение.
Мысли об этом 💭
Использование библиотеки, которая позволяет нам создавать изображение того, что мы видим, безусловно, полезно. Иногда вам нужно сделать снимок экрана, когда вы еще не реализовали полноценный комплексный сервис, который создает отчет в формате pdf или отправляет из бэкэнд-сервиса электронное письмо с данными, которые вы хотите заморозить.
Итак, что бы вы ни использовали, html2canvas определенно будет правильным решением для вас, будь то простой javascript, React, Angular или любая другая библиотека/фреймворк.
Ссылки для ознакомления 🔗
Кстати, я написал еще одну статью, которая может быть вам интересна, о том, как сгенерировать pdf в Frontend-проекте, написанном на React.
Следуя исходному коду проекта, показанному в статье:
https://github.com/CoxxD/screenshot-project
Дайте мне знать в комментариях, и если вам понравилась эта статья, не стесняйтесь нажимать кнопку 👏 столько раз, сколько хотите, это побудит меня написать другие статьи :)
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Присоединяйтесь к нашему сообществу Discord и следите за нами в Twitter, LinkedIn и YouTube.
Узнайте, как привлечь внимание к своему стартапу с помощью Circuit.
