new

printPdf

Создания pdf файла на фронтэнде.
pdf
Автор дополнения
Boshnik
Пакетов
9
Закачек
969
Обычно отвечает в течение суток
Автор дополнения
Пакетов
9
Закачек
969
Обычно отвечает в течение суток
Версия 1.1.0-pl
Дата выпуска 23.03.2020
Загрузки 23
Просмотры 1 200

Как создать pdf файл:


Для этого нужно вызвать функцию printPdf, которая принимает 2 параметра
  • container — контейнер, который нужно распечатать. По умолчанию: 'body'
  • mode — режим печати: default или page. По умолчанию: default
Пример:
$(document).on('click', '#printPdf', function(e){
    e.preventDefault();
    printPdf('.printPdf');
});


Режим печати(mode):
  • default — Обычная печать, но существует ограничение по кол-ву страниц ~ 6.
  • page — Постраничная печать. Разделяет каждый контейнер на отдельную страницу. Ограничений нет, но не умеет сохранять ссылки — аналогично обычному скриншоту.


Css классы:


  • print-break — используется для разрыва страницы. Работает только в режиме: 'default'
  • print-hide — для скрытия элементов при печати.


Js cобытия:


startPrint

Перед началом создание pdf файла
  • config — настройки печати
Пример:
Меняем название файла
$(document).on('startPrint', function(e){
    let config = e.detail.config;
    config.print.filename = 'newFileName';
});


createPdf

После получение содержимого страницы. Здесь можно изменить pdf файл.
  • pdf — объект pdf
Пример:
Добавляем логотип modstore и пронумеруем страницы:
$(document).on('createPdf', function(e){
    let pdf = e.detail.pdf;
    let totalPages = pdf.internal.getNumberOfPages();
    let logo = '/assets/img/printPdf/modstore.png';
    for (i = 1; i <= totalPages; i++) {
        pdf.setPage(i); // получаем текущую страницу
    	pdf.setFontSize(10);
    	pdf.setTextColor(150);
    	let pdf_width = pdf.internal.pageSize.getWidth()/2.25;
    	let pdf_height = pdf.internal.pageSize.getHeight() - 1;
    	pdf.text('Page ' + i + ' of ' + totalPages, pdf_width, pdf_height);
    	pdf.addImage(logo, pdf_width + 4, 0.5, 2, 0);
    }
});


endPrint

После создания файла pdf.
  • pdf — объект pdf
Пример:
Показываем сообщение:
$(document).on('endPrint', function(e){
    let pdf = e.detail.pdf;
    let content = 'Вы можете открыть файл по <a href="'+pdf.output('bloburl')+'">ссылке</a>';
    swal('prindPdf', content, 'info');
});


Еще примеры:
Открываем pdf в новом окне:
$(document).on('createPdf', function(e){
        let pdf = e.detail.pdf;
        
        // Здесь можно изменить содержимое pdf
        
        // Открываем в номом окне
        pdf.output("pdfobjectnewwindow");
    });


Дерево настроек:


  • config
    • print
      • margin — Отступы в PDF файле. По умолчанию: [0,0,0,0]
      • filename — Имя файла для экспортированного PDF
      • image
        • type — Тип изображения. Возможные значения: «png», «jpeg» и «webp» (в Chrome). По умолчанию: «jpeg»
        • quality — Качество изображения от 0 до 1
      • html2canvas
        • scale — Масштаб. Влияет на качество pdf файла. По умолчанию: 2
        • useCORS — Загрузить изображения с сервера с помощью CORS. По умолчанию: false
      • jsPDF
        • unit — Единица измерения, которая будет использоваться при указании координат. По умолчанию: «in»
        • format — Формат страницы. По умолчанию: auto
        • orientation — Ориентация страницы. По умолчанию: auto
        • compress — Сжать сгенерированный PDF. По умолчанию: true
    • save — Сохранять файл PDF. По умолчанию: Да

1.1.0-pl (23.03.20)

  • Все параметры перенесены в системные настройки.
  • Переписаны скрипты и стили
  • Обновлены библиотеки
  • Добавлены события

1.0.1-pl

  • Обновлены стили и скрипты
  • Обновлен чанк printPdf
  • Обновлен сниппет printPdf

1.0.0-pl

  • Первый релиз

Последние обсуждения в сообществе MODX.pro