Создавайте PDF-решения на основе передовых технологий

Node.js React.js

фон спроса

  • Бизнес-система должна предварительно просматривать отчеты (например, еженедельные отчеты о продуктах, отчеты о физическом осмотре и т. д.) и создавать формат PDF для загрузки или регулярной отправки назначенным пользователям.
  • Формат отчета относительно фиксированный, состоит из текста, изображений и диаграмм, в основном соответствует интерфейсной странице.

решение

Требования разделены на два этапа: предварительный просмотр отчета и создание отчета.

  • Предварительный просмотр отчета отображается на интерфейсе, который можно восстановить с помощью интерфейсных технологий, таких как React/Vue и других технологических стеков, а данные получаются с сервера.
  • Генерация отчета должна преобразовать HTML, сгенерированный на первом этапе, в PDF, и метод HTML2PDF делится на два типа:
    • Схема генерации клиента на основе холста
    • Схема генерации серверов на основе nodejs + puppeteer

полное дело

Ниже приводится описание двух схем, основанных на случае, зарегистрированном в ходе медицинского осмотра: Формат представления отчета о физическом осмотре следующий, формат относительно фиксированный, и он разделен на четыре страницы: страница личной информации, страница предложения, основная страница, страница личной информации и страница предложения.Данные поступают с сервера.

报告样式

Схема генерации клиента на основе холста

Canvas — это новый элемент стандарта HTML5, который можно использовать для рисования графики с помощью сценариев с использованием JS. Canvas предоставляет методы toDataURL/toBlob для преобразования содержимого холста в изображения.Документация по API выглядит следующим образом (из MDN):

canvas api

Поскольку документ HTML существует в виде дерева DOM в браузере, мы можем выполнить преобразование из HTML в PDF в три шага:

  • Преобразование дерева DOM в объект холста, что можно сделать с помощью html2canvas.
  • Преобразование холста в изображение, что можно сделать с помощью canvas.toDataURL.
  • Преобразование изображений в PDF, что можно сделать с помощью jsPDF.

Полная реализация кода:GitHub.com/Саймон I О/Статья…

Скриншот выглядит следующим образом, нажмите кнопку загрузки, чтобы создать PDF:

截图

Решение полностью генерируется на базе клиента и не требует поддержки сервера. В процессе использования данного решения были обнаружены некоторые проблемы:

  • Полученный PDF-файл размыт и имеет низкое качество.
  • Если в HTML есть изображение внешней ссылки, оно не может быть сгенерировано
  • Поскольку первым шагом является создание холста через DOM, для особенно длинного отчета, когда DOM не загружен и не нажимается для загрузки, это вызовет проблемы с созданием отчета.
  • Поскольку это решение на стороне клиента, пользователь должен активно инициировать создание, но для некоторых отчетов, которые отправляются пользователям на регулярной основе, это решение нельзя использовать.

Схема генерации серверов на основе nodejs + puppeteer

Puppeteer — это безголовый браузер, запущенный Google, то есть браузер без графического интерфейса, но способный реализовать отрисовку обычного браузерного HTML/JS/CSS, а также другие базовые функции браузера. Вы можете понять это как браузер Chrome без интерфейса. Существуют в основном следующие сценарии использования:

  • Создание скриншотов и PDF-файлов страниц
  • Просканируйте SPA и создайте предварительно обработанный контент (также известный как «SSR»).
  • Краулер, извлекающий нужный вам контент с веб-сайта
  • Автоматическое тестирование, автоматическая отправка форм, тестирование пользовательского интерфейса, ввод с клавиатуры и т. д.
  • Создайте современную автоматизированную тестовую среду. Запускайте тесты непосредственно в последней версии Chrome, используя новейшие функции JavaScript и браузера. Поняв функцию puppeteer, мы можем запустить экземпляр для визуализации отчета HTML, а затем использовать предоставляемую им функцию преобразования PDF для создания PDF.

Два важных API:

  • page.goto(url, [options]) — открыть файл по указанному URL, локальный файл (file://) или сетевой файл (http://)
  • page.pdf([options]) - конвертировать страницу в файл PDF

puppeteer использует небольшой пример для преобразования веб-страницы Baidu в pdf:

puppeteer使用

Полный код выглядит следующим образом:

Процесс запуска проекта выглядит следующим образом:

  • Перейдите в каталог webapp, используйте npm install и npm run start для запуска внешнего сервера, адрес:localhost:3000
  • Перейдите в каталог сервера, используйте npm install и npm run dev для запуска сервера узла, адрес:localhost:7001

Вся архитектура сервиса выглядит следующим образом:

架构图

Сервер узла добавляет через маршрутизацию контроллер, генерирующий pdf-файлы, который загружает страницу на localhost:3000 и генерирует pdf-файл, запуская экземпляр puppeteer. прямо в браузере черезhttp://localhost:7001/pdfВы можете получить доступ к сгенерированному PDF.

В реальной среде фронтенд-страница может быть развернута на сервере nginx или непосредственно на сервере Node. puppeteer также поддерживает работу с использованием куки, что позволяет избежать некоторых проблем, требующих аутентификации.

По сравнению с методом генерации на стороне клиента PDF-файл, сгенерированный кукловодом, имеет высокое качество и может соответствовать производственным требованиям.

В двух схемах, упомянутых в этой статье, часть данных бэкенд-запроса ajax опущена, и читатели могут добавлять их в соответствии со своими потребностями.

Reference

Категории