Как сгенерировать PDF в приложении React.js
При работе над веб-/мобильными приложениями очень часто требуется генерировать pdf для обмена формами, счетами с пользователем. Для решения этой задачи существуют различные пакеты на разных языках. Если мы говорим об Angular или React js, то PDF очень часто используется для этой задачи. Он имеет более 18 тысяч звезд на Github и загружается 1 52 000 раз в неделю.
В этой статье мы расскажем, как сгенерировать простой PDF-файл в приложении React с помощью пакета jsPDF.
Давайте приступим!
Создание базового приложения React
Создайте базовое приложение, введя в терминал следующую команду.
npx create-react-app react-pdf-appУстановка пакет jsPDF с помощью NPM
#for NPM
npm install --save jspdf
#for yarn
yarn add jspdf
Импорт установленного пакета
Следующая задача - импортировать установленный выше пакет в компонент приложения. Для этого откройте файл App.js и добавьте в него следующий код.
import jsPDF from 'jspdf'В приведенном ниже коде мы увидим, как создать объект функции jsPDF и как использовать различные методы для выполнения этой задачи.
generatePdf = () => {
var doc = new jsPDF('p', 'pt');
doc.text(20, 20, 'This is the first page title.')
doc.setFont('helvetica')
doc.setFontType('normal')
doc.text(20, 60, 'This is the content area.')
doc.addPage() // this code creates new page in pdf document
doc.setFont('helvetica')
doc.setFontType('normal')
doc.text(20, 100, 'This is the second page.')
doc.save('sample-file.pdf')
}
- Функция
doc.text()используется для установки текста с указанием позиции. Первые два аргумента - это координаты позиции X и Y для текста.
- Функция
doc.setFont()используется для установки определенного шрифта для текста.
- Функция
doc.addPage()используется для создания новой страницы в pdf.
- Функция
doc.save()принимает в качестве аргумента имя pdf-файла.
Полный код App.js
import React from 'react';
import jsPDF from 'jspdf'
class App extends React.Component {
constructor(props) {
super(props)
};
generatePdf = () => {
var doc = new jsPDF('p', 'pt');
doc.text(20, 20, 'This is the first page title.')
doc.setFont('helvetica')
doc.setFontType('normal')
doc.text(20, 60, 'This is the content area.')
doc.addPage() // this code creates new page in pdf document
doc.setFont('helvetica')
doc.setFontType('normal')
doc.text(20, 100, 'This is the second page.')
doc.save('sample-file.pdf')
}
render() {
return (
<div>
<button onClick={this.generatePdf} type="primary">Download PDF</button>
</div>
);
}
}
export default App;
Наконец, запустите приложение в терминале с помощью команды npm start и проверьте его работоспособность в браузере.
Заключение
В этой статье мы узнали, как сгенерировать PDF-файл в приложении React.
Надеюсь, эта статья помогла вам. Вы также можете найти другие демонстрации на React.js Sample Projects, чтобы начать работу над приложениями корпоративного уровня.
Спасибо!
