Решение для реализации чистого клиента и чистого сервера для HTML в PDF

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

Идеи

Google Chrome разработал свою собственную функцию Chrome без головы в 2017 году и одновременно запустил кукловодок. Его можно понять как браузер, который не имеет интерфейса, но может завершить функциональные функции сервера.

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

Во -первых, вам нужно установить кукловода. В установке NPM могут быть ошибки. Лучше всего использовать изображение CNPM Taobao для его установки.

Введите cnpm i puppeteer -S -зависимости установки.

Чтобы создать файл JS, вам нужно только открыть URL -адрес с браузером кукловода и сохранить PDF.

 // html2pdf.jsconst puppeteer = require ('кукольник'); ((async function () {// запустить службу const browser = wawit puppeteer.launch (); // Откройте вкладку const page = watait browser.newpage (); // Перейти к адресу await await page.goto ('https://koa.bootcss.com/#context');

Затем введите node html2pdf.js на консоли, чтобы запустить службу.

Конечно, module.export также может экспортировать метод модуля в соответствии с бизнес -логикой.

недостаток

Невозможно сохранить динамические данные в форме

Поскольку это страница запроса с сервера, если пользовательский ввод не сохранен по адресу запроса, вырезанный PDF будет начальным состоянием, в котором страница не была заполнена.

Другими словами, это может преобразовать только статические страницы, потому что наши потребности имеют большой пользовательский ввод, поэтому проходите.

Идеи

• Используя html2canvas, введите узел DOM, который необходимо преобразовать, а также перемещать и преобразовать его в холст Canvas
• Преобразуйте холст в картинку Base64, используйте JSPDF для создания файла PDF и вставьте изображение в PDF.

недостаток

искажение.

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

В то же время, поскольку это скриншот, ссылка на страницу и другие функции могут быть потеряны.

Текстовое отсечение

Когда холст на холсте больше, чем на один размер PDF, вывод будет ошибочным. В настоящее время нам нужно определить, превышает ли холст холст размер A4. Если он превышает холст, сегментируйте холст и вставьте его на другую страницу.

Проблема возникает снова в это время. Поскольку он разделяет изображение, вполне вероятно, что изображение или текст будут усечены с половины, потому что мы не можем проанализировать структуру внутреннего элемента холста.

Основной код

Наши потребности не имеют изображений и ссылок, поэтому проблема искажения мало влияет на нас. В то же время наша форма состоит из нескольких элементов дубликатов одинаковой длины, и эти элементы очень короткие и не будут превышать один кусок бумаги A4 (хотя это не является строгим, если необходимо, вы можете получить ширину и высоту элемента DOM и разрезать в соответствии с высотой элемента DOM).

Поэтому я планирую напрямую разделить холст в соответствии с элементом и сохранить каждый элемент на страницу бумаги A4.

Несколько основных подходов должны быть поняты перед началом:

html2canvas

 // dom - это узел DOM, который будет преобразован html2canvas (dom, {founalcolor: #ffffff, width: width, высота: высота, масштаб: 2, allowtaint: true,}). Тогда ((canvas) => {// Canvas - это Canvas после успешного преобразования})

JSPDF

 // Создать экземпляр let pdf = new jspdf ('', 'pt', 'a4'); // Добавить изображение в файл PDF // Первый параметр - это формат файла (BASE64), который должен быть вставлен, вторым является формат файла // Третий и четвертый - координаты в верхнем левом углу изображения, а последние два - ширина и высота изображения после вставки изображения PDF.Addimage (изображение, JPEG ', 10,10, высота, wwitth); // Добавить новую страницу pdf.addpage () // Сохранить файл PDF pdf.save ()

холст

 // Canvas - это изображение, которое нужно вырезать // sx, sy - это координаты для начала обрезки // swidth, а Шейт - ширина, а высота обрезки // dx и dy - координаты, вставленные в изображение после обрезки // Шидта, Шейт - это ширина и высота изображения, Dy, Dy, Swidth, Swidth, Swidth, Swidth, Sweigth, Swidth, Swidth, Shiletth, Sweidth, Swiutth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth, Swidth. Шейт);

 /*** @description: форма в PDF -файл* @return: pdf*/onsubmit () {// Это форма, которую я хочу преобразовать, в нем много подобных таблиц let form = this. $ refs.form; // Получить ширину и высоту элемента let width = form.getBoundingClientRect (). Ширина; let Height = form.getBoundingClientRect (). Высота; html2canvas (form, {founalcolor: #ffffff, ширина: ширина, высота: высота, масштаб: 2, allowtaint: true,}). Затем ((canvas) => {let pdf = new jspdf ('', 'pt', 'a4'); // выполнять режущее изображение let let canvilslist = this i.split lepridely (canvally); // Пройти список холва и добавить изображение на страницу Canvaslist.foreach ((item, index) => {// преобразовать формат изображения в Base64 let itemimage = item.todataurl ('Image/jpeg', 1.0); // резерв 10px margin, ширина бумаги A4-595px на мониторе 72-resolution. pdf.addimage (itemimage, 'jpeg', 10,10,575.28,575.28/item.width*item.height); pdf.save ('test.pdf'); Пусть chunkheight = height/num; // Высота каждого среза Let chunklist = []; // Хранив результат Canvas для (let i = 0; i <height; i+= Chunkheight) {// Инициализировать положение прямоугольной коробки с обрезкой let sx = 0, sy = i, swidth = width, weight = chunkheight, dx = 0, dy = 0; // Создать узел Canvas let Canvasitem = document.createElement (Canvas); // Инициализировать размер холста canvasitem.height = Chunkheight; canvasitem.width = ширина; let cxt = canvasitem.getContext (2d); // Поместите обрезанное изображение в новый узел Canvas cxt.drawimage (Canvas, SX, SY, Swidth, Sheuett, DX, DY, Swidth, Sheutt); chunklist.push (canvasitem); } return chunklist;},

Страница после сохранения формы

Эффект конвертации в PDF

Это статья о решении Pure Client и Pure Server реализации HTML в PDF. Для получения более связанного содержимого HTML и PDF -файла, пожалуйста, найдите предыдущие статьи с wulin.com или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что все будут поддерживать wulin.com в будущем!