Сохранить контент в pdf?

Question

[Богдан]

Здравствуйте. А не подскажите, как лучше всего сверстану таблицу в HTML экспортировать в pdf, а то я поверхностно ознакомился со всем инструментами jsPDF, pdfmake, PDFkit и решения не вижу. Если с canvas то непонятно как сделать если таблица на более чем одну страницу А если рисовать самому построчно то как тогда быть с переносом строк? Не подскажите как Вы решаете такие вопросы?
Спасибо

Comments

[Stalker_RED]

ознакомился ... и решения не вижу

А не могли бы вы подробнее описать в чем именно проблема?

[Богдан]

Stalker_RED: У меня есть таблица которая будет в А4 формате занимать больше чем 1 страницу, в таблице есть переносы строк. Как собственно такое можно реализовать?

[Stalker_RED]

Богдан: Есть таблица, есть переносы... А вопрос в чем состоит?

[Богдан]

Stalker_RED: Как эту таблицу впихнуть в pdf

[Максим]

Богдан: откроёте в браузере эту таблицу ... и потом нажмите на печать ... но формат выберите PDF и всё ...

[Богдан]

Максим Ленский: Ну так отображаемая форма и печатаемая может существенно отличатся... Так просто не выйдет. Нужно же для документа колонтитулы добавить, на последней странице подписи

[Максим]

Богдан: настройки же есть ... там галочки поставить и всё включая фон и границы будут отображаться ... в хроме удобнее делать чем в лисе , я в низу ссылку дал посмотрите .. этот PDF я делал 5 минкт назад из HTML

Answer 1

[Максим]

lensky.0fees.us/mozilla.pdf - это наверно каждый браузер умеет - сохранять как PDF , хотя я наверно ни верно понял вопрос

Comments

[Богдан]

Ну а как в этом pdf поменять колонтитулы. У Вас на верхнем например ссылка на документ "file:///home/lensky/Рабочий стол/site1/index.html", ну и нижний колонтитул тоже нужно поменять, и расположение номера страницы и само слово "Стр" убрать.
П.С. Я как бы еще с когорты тех кто начинал на FoxPro, Delphi - где отчет генерировался отдельно от формы ввода.

[Максим]

Богдан: вот такое ни сделать там ... вы правы ... я просто предложил как вариант

[Богдан]

Максим Ленский: Спасибо за вариант. Но я думаю что должны же быть какое-то средства для реализации сохранения в pdf с последующей печатью. Многие же ресурсы, особенно финансовые формируют разные платежки в pdf на лету.

[Максим]

Богдан: я не задавался таким вопросом ... мне хватает возможностей браузера

Answer 2

[Константин Цветков]

Ну а как в этом pdf поменять колонтитулы.

Формат PDF предназначен для того, что бы в нём ничего не меняли.

Нужно же для документа колонтитулы добавить, на последней странице подписи

А настраивать форму и опции печати нужно в генераторе отчётов или в текстовом редакторе, наконец.

Не меняли после его создания, но как его создать?

PDF не создают, в него сохраняют готовый результат работы для распространения межплатформенного и неизменного. Если вам нужно работать с "таблицу в HTML" так и сохраняйте в HTML-файл. Потом его можно конвертировать с помощью topdf, например.

Comments

[Богдан]

Не меняли после его создания, но как его создать?

Answer 3

[Stalker_RED]

jsPDF, как-то так
https://jsfiddle.net/1ru8wjfq/

Comments

[Богдан]

Ну я как-то так тоже пробовал, и как-то криво получается ... Если быть точным то очень криво получается.

[Stalker_RED]

Богдан: Дык стили нужно соответствующие писать.

[Богдан]

Так стиль на шапку header таблицы не написан, а он применялся причем какой-то кривой. А где можно почитать доку по jsPDF, то в нету такого метода fromHTML.
Через канву как-то красивей получается, только я не знак как с многостраничностью быть

document.addEventListener( 'DOMContentLoaded', ( ) => {
  const iframe = document.querySelector( 'iframe' );
  const canvas = document.querySelector( 'canvas' );

  const view = document.querySelector( '.view' );

  document.querySelector( '#btn_canvas' ).addEventListener( 'click', ( ) => {
    rasterizeHTML
      .drawHTML( view.innerHTML )
      .then( function success( renderResult ) {
        const height = view.clientHeight;
        const width = view.clientWidth;

        canvas.width = width;
        canvas.height = height;

        const imgData = canvas.getContext( '2d' ).drawImage( renderResult.image, 10, 10 );

        const doc = new jsPDF();
        doc.addImage( canvas.toDataURL( 'image/png', 1.0 ), 'PNG',  0, 0, height * 160 / width, 160 );
        const pdfText = doc.output( 'datauristring' );
        iframe.src = pdfText;
    } );
  } );
} );

Вот результат, здесь тоже кривовато, но координатами я думаю можно выровнять

[Stalker_RED]

Богдан: fromHTML был в предыдущих версиях, и сейчас все еще работает, хоть и не упомянут в документации. Я не призываю вас делать именно так, вы можете прочесть документацию и сделать правильно.

Так стиль на шапку header таблицы не написан, а он применялся причем какой-то кривой

Кривые стили по умолчанию, ничего необычного. Я не вполне понимаю чего вы ожидаете. Никакая бибилиотека не сможет отобразить html в pdf без потерь. Скорее всего придется писать под pdf отдельные стили. Если вас это не устраивает и хочется пиксельперфект любой ценой - можно перегнать все в картинку и ее встроить в PDF *троллфейс.жпг*.

[Богдан]

Stalker_RED: Перегнать в картинку можно, но с картинкой как бы есть ограничения ... как ее порезать на страницы?