Вступление
Генерация формата PDF файла в JavaScript на стороне клиента теперь тривиальна с отличной библиотекой, о которой мы, вероятно, слышали о.
Библиотека позволяет выбрать элементы DOM (модель документов), которые вы хотите опубликовать в качестве содержимого PDF.
Экспорт общих HTML/CSS в PDF был открытым вопросом без окончательного ответа на довольно долгое время.
Мы борелись с различными подходами и, в целом, все они имеют недостатки. У меня есть конкретные исследования по использованию библиотеки JSPDF и собираемся пройти вас через процесс настройки вещей и создания довольно простых, но сложных, дизайна, которые вам понадобится в вашем путешествии, чтобы сделать отличные шаблоны отчетов PDF.
Постановка задачи
Работа с универсальным содержанием HTML/CSS в PDF было открытым вопросом без окончательного ответа в течение довольно долгого времени. Мы борелись с различными подходами и, в целом, все они имеют недостатки.
Популярные вопросы, которые вы увидите в Интернете, показаны ниже: • Возможно ли сохранить страницу HTML в качестве PDF с помощью JavaScript или jQuery? • Как экспортировать HTML-страницы в качестве PDF с использованием чистого JavaScript. • Как создать несколько страниц. • Создайте PDF из HTML в Div с помощью JavaScript. • Несколько страниц с HTML-преобразователями PDF.
Вопросы продолжаются и на.
Цель этого учебника
Я выберу тебя через начать работу и интеграцию JSPDF в веб-приложение на основе браузера JavaScript.
В конце этого урока вы сможете выполнить следующее: • Используйте окончательную точку API PROTHTML, чтобы получить нашу обертку контейнера HTML контента. • Создайте PDF с несколькими страницами. • Создайте функцию для преобразования изображений в Base64 Image Однородный локатор ресурсов (URL) и используйте в нашем заголовке. • Добавление текста заголовка и нижнего колонтитула (например, подсчет страниц) на каждую единую сгенерированную страницу JSPDF.
Предпосылки
Вы можете найти библиотеку здесь: MrRio/JSPDF Отказ Нажмите, чтобы загрузить OctoCat.jpg Отказ
Загрузите библиотеку JSPDF и используйте изображение в качестве руководства для нашей структуры папки проекта:
Во-первых, мы создадим нашу структуру папки, как видно на рисунке выше. Откройте папку JSPDF из предварительного условия и скопируйте папку Dist в папку Project. Создайте новый файл и назовите его index.html. Скачать или скопируйте Заголовок изображения к папке проекта.
Работа с файлом index.html
Мы создадим скелет нашего HTML со стандартными тегами HTML:
Index.html
Html to Multi Page PDF using jsPDF
Из кода это должно быть самоснабжение, но я пойду на разные разделы структуры HTML-кода.
Головная секция содержит заголовок страницы и таблицу таблицы стилей. Секция Body HTML содержит следующее: • Кнопка: кнопка «Генерация PDF» на щелчке будет запускает функцию генерации, которые нам еще предстоит создавать. <кнопка> генерировать PDF
• Следующий раздел проведет все наше содержание HTML, которое мы хотим преобразовать в PDF.
Написание функции JavaScript для обработки преобразования HTML.
Глобальные переменные
Создать функцию PDF
generate = function()
{
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('html-2-pdfwrapper'),
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width// max width of content on PDF
},function(dispose) {
headerFooterFormatting(pdf)
},
margins);
var iframe = document.createElement('iframe');
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:650px; padding:20px;');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring');
};
Объяснение кода
Внутренняя функция генерации мы создали объект JSPDF в качестве PDF. У JSPDF есть конечная точка API, называемая fromhtml со следующими параметрами:
jsPDFAPI.fromHTML = function (HTML, x, y, settings, callback, margins)
HTML – это содержимое HTML, которое вы хотите преобразовать. X – это горизонтальное расстояние от x-координаты вашей страницы макета PDF. Y – это вертикальное расстояние от y-координаты вашей страницы макета PDF.
Функция обратного вызова используется для выполнения дополнительных функций на создании страниц. Мы собираемся воспользоваться функцией обратного вызова, чтобы добавить нумерацию страниц и заголовок на наши страницы позже.
Мы также создаем элемент IFRAME для отображения нашего сгенерированного PDF.
Функция форматирования страницы и нижнего колонтитула
function headerFooterFormatting(doc)
{
var totalPages = doc.internal.getNumberOfPages();
for(var i = totalPages; i >= 1; i--)
{ //make this page, the current page we are currently working on.
doc.setPage(i);
header(doc);
footer(doc, i, totalPages);
}
};
Объяснение кода
Функция используется для добавления дополнительных данных на каждую страницу PDF, и поэтому она будет вызываться на параметрах обратного вызова PROPDF. Требуется объект JSPDF.
Функция заголовка
function header(doc)
{
doc.setFontSize(30);
doc.setTextColor(40);
doc.setFontStyle('normal');
if (base64Img) {
doc.addImage(base64Img, 'JPEG', margins.left, 10, 40,40);
}
doc.text("Report Header Template", margins.left + 50, 40 );
doc.line(3, 70, margins.width + 43,70); // horizontal line
};
Загрузите изображение заголовка и преобразовать в Base64
imgToBase64('octocat.jpg', function(base64) {
base64Img = base64;
});
Функция конвертера изображений
// You could either use a function similar to this or preconvert an image with, for example, http://dopiaza.org/tools/datauri
// http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript
function imgToBase64(url, callback, imgVariable) {
if (!window.FileReade) {
callback(null);
return;
}
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
imgVariable = reader.result.replace('text/xml', 'image/jpeg');
callback(imgVariable);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
};
Скачать полный проект сейчас: Compentor HTML к PDF.ZIP
Пожалуйста, не стесняйтесь делиться своими комментариями и помочь улучшить код везде, где это возможно.