TL; DR: Здесь файлы проекта
Здравствуйте, и добро пожаловать в мой блог о том, как создать собственную таблицу и экспортировать ее с помощью jsPDF! Это руководство призвано дать вам лучшее представление о библиотеке и мощных возможностях настройки jsPDF. Уже есть плагины для табличных структур, предлагаемые jsPDF; однако вам может потребоваться больший контроль и полная настройка.
Я буду использовать React в качестве предпочтительной библиотеки Javascript; однако код не зависит от фреймворка, поскольку мы будем создавать функцию pdf, которая будет обрабатывать данные. Ура, модули!
В этом руководстве предполагается, что вы понимаете:
- Как получать данные из API
- Как анализировать JSON
- Методы ES6 и функционального массива
Сценарии использования:
- Создание отчетов
- Создание pdf табличных данных для:
- финансов
- ведения учета
- статусов обновления компании
Выход:
существующий проект ИЛИ создайте новый.
npx create-react-app <NAMEOFAPP> || yarn create react-app <NAMEOFAPP>
Затем установите зависимости
npm install || yarn install
Затем давайте добавим jsPDF
npm install jspdf --save || yarn add jspdf
- Давайте определим источники наших данных
- База данных фильмов (это то, что я буду использовать в качестве источника данных)
- Mockaroo (Это потребует от вас настройки набора данных по вашему выбору)
Потребности:
- Нам нужно создать функцию PDF, которую мы будем вызывать при нажатии кнопки.
- Эта функция должна принимать 3 основных аргумента:
({ data, headers, filename })
Если вы хотите добавить в свою функцию некоторую конфигурацию или параметры для динамической передачи стилей или других метаданных, эта базовая структура должна дать вам представление о том, как ее взломать :). Подождите, пожалуйста, до конца!
Вот что мы делаем! Функционально работающее табличное представление «голых костей». Как только вы почувствуете библиотеку. Укладка - это легкий ветерок.
Давайте напишем код!
Если вы используете данные Movie DB: в нашем корневом каталоге давайте создадим файл .env, в котором будут храниться наши ключи API. Добавьте этот файл в свой файл .gitignore
Я буду структурировать свой так:
REACT_APP_TMDB_API_URL="https://api.themoviedb.org/3" REACT_APP_TMDB_API_KEY="?api_key=<YOUR API KEY>"
… И в нашем файле App.js мы будем обращаться к этим переменным следующим образом:
const tmdbAPI = process.env.REACT_APP_TMDB_API_URL const tmdbApiKey = process.env.REACT_APP_TMDB_API_KEY
Если вы используете какой-либо другой набор данных из другого API, обрабатывайте эти ключи и секреты по мере необходимости.
В папке проекта ./src создадим папку utils, в которой будет храниться наша функция pdf. Вы можете называть это как хотите. В этом примере я просто назову его pdf.js.
Текущее состояние нашего каталога:
nameOfApp/ ..src/ ....utils/ ......pdf.js
Давайте добавим сюда код-заполнитель, чтобы он не сломал нашу сборку, когда мы импортируем ее в наш компонент.
Далее я создам быстрый пользовательский интерфейс без стиля, чтобы пользователи могли искать фильм и скачивать PDF-файл. Давайте перейдем к нашему файлу src / App.js. Имейте в виду, что это только для демонстрационных целей, и ваш пробег может варьироваться в зависимости от ваших потребностей. Ключевой вывод: получайте данные, как хотите, и дайте пользователю возможность скачать PDF-файл.
В App.js:
Ваш проект может выглядеть так:
А при поиске…
Переходим к PDF-файлу!
В нашем файле src / utils / pdf.js. У нас есть доступ к следующим переменным: данные, заголовки и имя файла.
Мы передаем набор данных, который имеет довольно согласованную модель, и на основе передаваемого нами сопоставления заголовков мы должны иметь возможность довольно легко получить доступ к необходимым реквизитам.
В src / utils / pdf.js:
Сначала нам нужно установить некоторые параметры конфигурации для pdf. Это объект, который передается в новый экземпляр jsPDF. Мы устанавливаем ориентацию на альбомную, единицу измерения - на точку (jsPDF предлагает допустимые размеры в миллиметрах, дюймах и пикселях), а формат формата бумаги в этом примере - a4.
Теперь мы знаем, что у нас размер бумаги A4, однако что это на самом деле означает в контексте нашей единицы измерения? Нам нужно получить размеры страницы по высоте и ширине в точках. В исходном коде здесь есть таблица, которая представляет [ширину, высоту] каждого доступного размера бумаги, и поскольку мы находимся в альбомном режиме (см. Ориентацию в параметрах конфигурации jsPDF выше), я перевернул значения ширины и высоты, чтобы отразить это в объекте pageDimensions.
Итак, мы идем. Теперь, имея некоторый контекст для размеров нашей бумаги в пунктах, нам нужно установить «живую область» нашего документа. Активная область документа представляет собой область страницы, которая будет иметь контент. Поэтому нам нужно установить размер маржи. Живой областью для нашей ширины будет ширина поля, а для высоты - высота поля. Здесь я говорю, какие бы габаритные параметры ни были, снимите запас с обеих сторон.
Давайте настроим стандартные отступы, которые мы можем добавить к известным координатам и дать немного передышки между элементами. Вкратце, это будет действовать как стандартное заполнение CSS, если вы хотите, добавив его к параметрам x, y, w, h.
Кроме того, давайте продолжим и установим здесь стандартный размер шрифта. На данный момент не беспокойтесь о других вариантах стилизованного шрифта. Вы можете добавить их позже.
Теперь давайте добавим заголовки в наш документ. Это будет немного рискованно. Так что оставайся со мной :). Ранее мы передавали массив заголовков в нашу функцию pdf в App.js. Для дальнейшей настройки вы можете добавить опору xPos к каждому объекту типа number, и функция ниже разместит эти заголовки в соответствующем месте. В этом примере я не определяю xPos, а просто размещаю все заголовки в столбцах одинакового размера в моем документе.
Здесь мы начинаем с xPosition pageMargin плюс любой индекс, в котором мы находимся, умноженный на количество необходимых столбцов:
Формула для четных столбцов:
pageMargin + index * (liveArea / amountOfColumns)
столбец 1 начинается с: 50 + 0 * 197,75 = 50
столбец 2 начинается с: 50 + 1 * 197,75 = 247,75
столбец 3 начинается с: 50 + 2 * 197,75 = 445,5
столбец 4 начинается с: 50 + 3 * 197,75 = 643,25
Поскольку данные должны быть выровнены по заголовкам, мы будем предполагать, что это источник истины для ВСЕГО выравнивания. Нам нужно сохранить эти значения в переменной, чтобы информировать наши столбцы данных о том, где они должны встать на место, поэтому мы добавляем переменную xPositions. Этот массив будет содержать значение позиции x для каждого заголовка, который мы позже можем вызвать по индексу! Это будет для нас супер круто позже. Независимо от того, сколько у вас заголовков, вы можете рассчитывать на то, что значение индекса будет соответствовать вашему заголовку;).
Прохладный! При нажатии кнопки PDF вы увидите строку заголовка! СЛАДА! Почти сделано!
Затем давайте определим разделитель для наших заголовков и данных, которые следуют за ними, с помощью метода линии в документе.
строка документа (x1: число, y1: число, x2: число, y2: число)
Я добавил 3,5 пункта к буквам «Y» и «2», чтобы сдвинуть его вниз из текста заголовка. Я мог бы использовать здесь отступы, но не думал, что они нуждаются в таком большом количестве, скорее, просто подтолкнуть.
Одна из ключевых вещей, на которую следует обратить внимание, - это наш baseYPosForRows. По сути, это означает, что независимо от того, какая страница, это наша стандартная начальная точка y для отображения данных.
Кроме того, nextYPos изменяемый. Мы будем накапливать высоту строк в этой переменной до разрыва страницы, в котором мы ее сбросим.
Далее мы начнем цикл. В этом примере это будет вложенный цикл. Возможно, не самый эффективный в крупном масштабе, однако с некоторым форматированием pre-pdf вы можете сделать все строки отдельными массивами и привязать их по индексу в их местоположения по индексу из массива xPositions.
Здесь я беззастенчиво использую вложенный forEach. :-п
Чтобы упростить чтение следующего раздела, я прокомментировал код, чтобы описать, что происходит.
БУМ! У вас есть экспортируемый PDF-файл, в котором данные отображаются в виде таблицы!
Это просто голая таблица, которую вы можете взламывать / улучшать по мере необходимости. Дополнительные примеры api см. В документации jsPDF:
Для полных учебных файлов проекта:
GitHub - cjharkins / jspdf-tutorial-charkins
Не стесняйтесь оставлять комментарии ниже о том, как это улучшить или как вы реализовали это в своем собственном проекте! Также не забудьте аплодировать, если вам понравился материал или он вам чем-то помог!
