Egg + Puppeteer реализует Html в PDF (с открытым исходным кодом)

внешний интерфейс Открытый исходный код
Egg + Puppeteer реализует Html в PDF (с открытым исходным кодом)

задний план

У команды проекта есть функция, аналогичная редактору форматированного текста, который должен поддерживать печать в браузере IE. Для решения проблемы совместимости печати требуется набор сервисов для вывода PDF по Html.

Срок действия сервера истек, чтобы увидеть эффект, вы можете напрямую клонировать его на локальный и запустить его, чтобы увидетьalexwjj / html-to-pdf😎😎😎

image.png

исследование

Существует множество решений для конвертации html в pdf, выбор зависит от конкретной ситуации.

1. Браузер Chrome поставляется с

недостаток:

  • Требовать, чтобы пользователь нажимал
  • Пользователям необходимо использовать поддерживаемый браузер, например chrome.
  • Печать по умолчанию для глобальной печати

рекламировать: Частичная печать может относиться к моему плагину 😝😝😝:vue-iframe-print

npm install vue-iframe-printДобавьте в DOM то, что нужно распечататьv-printЛокальная печать может быть реализована

2. html2canvas + jsPdf

Реализация может означать:Javascript конвертирует html в pdf, загружает, поддерживает несколько страниц (html2canvas и jsPDF)

недостаток:

  • Совместимость плагина html2canvas в IE
  • проблемы с ясностью
  • проблема с пагинацией
  • Проблема с обрезанием текстового изображения

3. Преобразование узлового сервера

  • wkthtmltopdfМного дыр~
  • phantomjsБезголовый браузер на базе webkit мало используется сообществом и давно не обновлялся, подробнее о нем можно узнать .
  • Puppeteer+ Есть больше людей, использующих это решение в сообществе Headless Chrome

Выберите Яйцо + Кукольник 😉😉😉

Если вы хотите начать с нуля, вы можете обратиться к:puppeteer генерирует pdf, который полностью удовлетворяет ваши потребности

Развертывание (стук по доске)❗❗❗

Когда вы выполнили основные функции, вы радостно думаете, что остался последний шаг, а затем приближается яма~

1. Использование Puppeteer в Docker

В официальной документации говорится, что «использование безголового Chrome в Docker и его запуск могут быть сложными». В официальной документации естьРаздел устранения неполадокВы можете найти всю необходимую информацию об установке puppeteer с помощью Docker's.

Если вы устанавливаете Puppeteer на зеркало Alpine, обязательно прокрутите немного вниз, когда увидите эту часть страницы. В противном случае вы можете упустить из виду тот факт, что вы не можете запустить последнюю версию Puppeteer, а также вам необходимо отключить shm с помощью флага

const browser = await puppeteer.launch({
 headless: true,
 args: ['--disable-dev-shm-usage']
});

В противном случае дочерним процессам Puppeteer может не хватить памяти до нормального запуска.

2. Развернуть в CentOS

Шаг 1. Установите хром

Поскольку это непосредственно используемый пакет Puppeteer, он должен зависеть от ядра Chrome, поэтому вы запускаете проект.npm installбудет застрять наnode install.jsЗдесь из-за проблем с сетью в Китае и размера хрома вам сложно развернуть его прямо на сервере.

puppeteer поддерживает локальные ссылки для установки Chrome, поэтому его можно указать вручную

Пропустить установку хрома:npm install puppeteer --ignore-scripts

Подробнее об установке Chrome см.Использование облачного сервера Alibaba (centos7) (7) Развертывание и использование PDF, экспортированного Puppeteer

Яма преследует, предупреждение~

const browser = await puppeteer.launch({
      args: ['--disable-dev-shm-usage', '--no-sandbox'],
      headless:true,
      // linux chrome的默认安装路径
      executablePath:'/opt/google/chrome/chrome'
  });

Путь запуска кукловода написан здесьexecutablePathЭто путь установки Chrome под Linux.Если вы измените локальный, соответствующий путь в разных системах может отличаться ~ Я много работал, чтобы найти пакет, который очень полезен ~npm install carlo

оcarlo, вы можете узнать:"Карло" новый Электрон?

'use strict';
const puppeteer = require('puppeteer');

const findChrome = require('../../node_modules/carlo/lib/find_chrome');

let browser = null;

module.exports = async () => {
  if (!browser) {
    const findChromePath = await findChrome({});
    // browser = await puppeteer.launch();
    browser = await puppeteer.launch({
      headless: true,
      // chrome的默认安装路径
      executablePath: findChromePath.executablePath,
      args: [
        '--disable-gpu',
        '--disable-dev-shm-usage',
        '--disable-setuid-sandbox',
        '--no-first-run',
        '--no-sandbox',
        '--no-zygote',
        '--single-process',
      ],
    });
  }
  return browser;
};

Шаг 2: Сценарий развертывания

Хотя у egg есть собственное управление процессами, здесь рекомендуется использовать pm2, в корневом каталоге проекта.

Новый файл deploy.sh

# 部署脚本
type node
npm install puppeteer --ignore-scripts
npm install
pm2 kill
# 睡眠，避免出现错误：Spawning PM2 daemon with pm2_home
sleep 2
pm2 start pm2.config.json

Новый pm2.config.json

{
  "apps": [
    {
      "name": "html-to-pdf",
      "script": "npm",
      "args": "run start",
      "log_date_format": "YYYY-MM-DD HH:mm:ss",
      "exec_mode": "fork",
      "max_memory_restart": "500M"
    }
  ]
}

Все готово, старт! ! !

Выполнить в проекте сервераsh deploy.sh, pm2 показывает, что запуск прошел успешно

В настоящее время проблем с сервисом нет, но возникнут другие проблемы, потому что на сервере нет библиотеки китайских шрифтов ~ Итак, сгенерированный pdf, китайские шрифты все искажены.

Шаг 3: Установите шрифты

1. Установите шрифтконфигyum -y install fontconfigПосле выполнения этой команды вы можете/usr/shareВы можете увидеть шрифты и fontconfig в папке 2. Добавьте библиотеку китайских шрифтов

  • из окнаC:\Windows\FontsСделайте копию шрифта внутри или просто выберите то, что вам нужно
  • на CentOS/usr/share/fontsСоздать новую папку под названием китайский
  • Затем просто скопируйте шрифт в CentOS./usr/share/fonts/chineseв
  • Измените права доступа к китайскому каталогу.chmod -R 775 /usr/share/fonts/chinese
  • Далее необходимо установитьttmkfdirЧтобы найти всю информацию о шрифтах в каталоге и создать файл fonts.scale, введите командуyum -y install ttmkfdir
  • Выполните команду ttmkfdir,ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir
  • Откройте файл конфигурации шрифта,vi /etc/fonts/fonts.conf, добавить следующий абзац
<!-- Font directory list -->
<dir>/usr/share/fonts</dir>
<dir>/usr/share/X11/fonts/Type1</dir>
<dir>/usr/share/X11/fonts/TTF</dir>
<dir>/usr/local/share/fonts</dir>
<dir>/usr/local/share/fonts/chinese</dir>
<dir>~/.fonts</dir>
  • Очистите кеш шрифтов в памяти, fc-cache
  • Взгляните на шрифты, которые вы только что добавили на свой компьютер. fc-список :lang=zh

ты закончил

В настоящее время в основном нет проблем, и проблемы, возникающие в будущем, будут снова обновлены.

Наконец: IE загружает PDF

Нужно установить адоб ридер

Ссылаться на

Категории