printPdf 1.1.0

Основные изменения:
— Все параметры перенесены в системные настройки.
— Переписанs стили и скрипты(на чистом js)
— Обновлены библиотеки
— Добавлены события

Демо



Как создать 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. По умолчанию: Да

Что еще?


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

Зачем?
Для себя я не решил зачем это нужно, поэтому данный функционал в стадии идеи.
К сожалению, здесь нет голосования, поэтому предлагаю так: если эта статья соберет более 30 лайков значит реализую.

P.S. Примеры показаны на jQuery потому что мне так удобно. Но, компонент работает без jQuery.

Ссылка на компонент.
Всем добра!
Aleksandr Huz
23 марта 2020, 19:55
modx.pro
3
465
+7
Поблагодарить автора Отправить деньги

Комментарии: 22

Артем
23 марта 2020, 21:33
+1
Но, компонент работает без jQuery.
*довольные звуки сторонников vanilla js*
    Николай Савин
    23 марта 2020, 22:14
    0
    Еще не довольные. Все примеры вызовов через jQuery написаны.
    iWatchYouFromAfar
    24 марта 2020, 00:41
    0
    P.S. Примеры показаны на jQuery потому что мне так удобно. Но, компонент работает без jQuery.
    Можно было бы написать примеры и на jQuery и на ванильке. Все таки продаете компонент юзерам и тут важно удобство их, а не ваше.
      Евгений Webinmd
      24 марта 2020, 00:56
      0
      примеры соответствуют цене компонента))
        Aleksandr Huz
        25 марта 2020, 17:14
        0
        комментарий соответствует интеллекту комментатора))
        Артем
        24 марта 2020, 02:59
        0
        справедливости ради, в примерах от jQuery только 1 строчка
        думаю, любой vanilla js разработчик осилит ее заменить на
        document.addEventListener('eventName', e => {});
          iWatchYouFromAfar
          24 марта 2020, 08:37
          0
          Ну с таким подходом можно 1/3 документаций не писать… :)
        Олег
        24 марта 2020, 12:28
        0
        А в чем толк, если pdf создается с помощью canvas -> photo -> pdf. То есть текст не выделить, работу с документом не продолжить.
        Используйте github.com/dompdf/dompdf к примеру, он хорошо html разбирает, сохраняя элементы.
        Либо если удобно использовать html2pdf, то подготавливайте и унифицируйте элементы, а не сохраняйте скрин секции в pdf.
          Александр Мельник
          24 марта 2020, 14:40
          0
          что значит «в чем толк». Человек сделал свое решение и поделился им за символическую цену.
          Наверняка в мире существуют сотни способов лучше и сотни хуже — но это решение вот такое.
          На мой взгляд, это все равно что сказать, в чем толк продолжать писать романы если «Мастер и Маргарита» уже написан или рисовать картины после «Монны Лизы».
            Олег
            24 марта 2020, 14:50
            +1
            Не стоит сравнивать мягкое с теплым. pdf документ нужен для чего?! Для отчетности прежде всего.
            Какая может быть отчетность с документом, где нельзя выделить информацию? Таким же макаром можно просто фотографию печатать и вводить информацию по картинке. Сложности в создании более человечного pdf нет, вовсе.
              Александр Мельник
              24 марта 2020, 15:37
              0
              Все относительно. Я лично совершенно не воспринимаю формат pdf как формат документов для отчетности.
                Олег
                24 марта 2020, 15:40
                0
                Почитайте что такое pdf, а не то, как вы его воспринимаете. Это документ прежде всего, а не фотография. Не вижу смысла продолжать дискуссию и обсуждать, ваши ощущения мира.
            Aleksandr Huz
            25 марта 2020, 17:12
            0
            Есть разные задачи. Например, у меня была такая:
            Есть сайт с таблицами, эти таблицы нужно поместить в pdf и затем распечатать.
            Вот основные условия:
            1. Это должно работать на фронте.
            2. Каждая таблица должна быть на новой странице.
            3. ctrl + p не подходит, да и не так как нужно генерирует файл для печати.

            Поэтому dompdf сразу отпадает и лучшее решение, что я нашел это html2pdf.

            А в чем толк, если pdf создается с помощью canvas -> photo -> pdf
            Если вам не подходит, это не означает, что и другим не подходит. В чем толк вашего комментария?

            если удобно использовать html2pdf, то подготавливайте и унифицируйте элементы
            Есть пример как это можно сделать?
              Антон
              26 марта 2020, 17:27
              0
              Джедайский способ, которым с недавних пор пользуюсь:
              var divContents = $("#toPrint").html();
              var printWindow = window.open('', '', 'height=720,width=1280');
              printWindow.document.write('<html><head><title>Это будет напечатано</title><link rel="stylesheet" href="css/print.css" />'); // стили для печатаемого блока
              printWindow.document.write('</head><body >');
              printWindow.document.write(divContents);
              printWindow.document.write('</body></html>');
              printWindow.document.close();
              printWindow.print();
              в итоге открывается окошко с отдельно нужным контентом из дива #toPrint и сразу диалог печати, если надо — печатаем, если надо — сохраняем в пдф.
              Плюха в том, что можно сами данные в скрытый див засунуть, как-то интерактивно их менять, например подставлять имя-фамилию и после этого уже пускать в печать/сохранение.
                Aleksandr Huz
                26 марта 2020, 17:38
                0
                А если нужно перенести данные но новую страницу?
                  Антон
                  26 марта 2020, 17:43
                  0
                  Тырк
                  Есть аналогичное правило page-break-before, если удобнее так.
                    Aleksandr Huz
                    26 марта 2020, 17:58
                    0
                    Это я знаю, но разрыв не происходит по вашему примеру. Может я не так делаю. printPdf тоже использует это свойство.

                    Ваш пример, все равно не решил бы мою задачу.
                    Единственный плюс в вашем варианте, это то, что можно изменить html.
                    Спасибо, что поделились!
            alexandr.skyrda
            27 мая 2020, 14:00
            0
            Не выводит картинки на печать, а именно лого в SVG
            вот скрипт вызова
            $(document).on('click', '#printPdf', function(e){
                        e.preventDefault();
                        printPdf();
                    });
            
            $(document).on('createPdf', function(e){
                        let pdf = e.detail.pdf;
                        
                        pdf.output("pdfobjectnewwindow");
                    });
            может кто сталкивался?
              Aleksandr Huz
              27 мая 2020, 14:17
              0
              Добрый день, Александр!
              Напишите мне в тех поддержку или скиньте сайт
              varanika
              08 августа 2020, 23:02
              0
              Обновила, кэш почистила. И кнопка печати перестала работать.
              А оказывается скрипт добавить теперь нужно? :)
                varanika
                08 августа 2020, 23:14
                0
                А почему послетали размеры в файле pdf после обновлений? Бл*, и теперь нужно разбираться, почему в А4 перестало влазить окно…
                  Aleksandr Huz
                  09 августа 2020, 15:19
                  0
                  напишите в тех. поддержку, я посмотрю.
                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                22