Как создать PDF из HTML веб-страницы?

Я ищу библиотеку для преобразования моей веб-страницы в файл PDF после события нажатия кнопки. я пытаюсь jspdf, но он печатает без CSS, как я могу сделать это с помощью JavaScript/jQuery и сохранить мой CSS? Или другой CSS, который я могу выбрать?

Источник

3 ответа

Существует новое облачное решение jQuery +, которое отображает любую HTML-страницу и ее CSS (включая правила печати) в PDF. Решением является настройка для печати любого региона вашей веб-страницы, вы просто указываете Formatter, какой элемент контейнера вы хотите напечатать, а библиотека делает все остальное. Вы получите встраиваемый PDF-файл, или бэкэнд отодвинет PDF-файл для загрузки.

Вот ваша библиотека (GitHub):
https://github.com/Xportability/css-to-pdf

Вот твоя скрипка:
http://jsfiddle.net/kstubs/jrtM5/

Вот рабочая демонстрация:
http://xep.cloudformatter.com/doc/

В настоящее время нет никаких инструкций по использованию, но следование вместе с примерами (просмотр источника) должно быть довольно самоочевидным (ищите кнопки "Распечатать"), и вот, более или менее дополнительные параметры / параметры, которые понимает метод Format.

options 
{
    pageWidth: "8.5in",             
    pageHeight: "11in", 
    pageMargin: ".25in", 
    pageMarginTop: "1in",
    pageMarginRight: "1in",
    pageMarginBottom: "1in",
    pageMarginLeft: "1in",
    render: ("none"|"newwin<default>"|embed"|"download<default IE>"),
    foStyle: { 
        // puts fo style attributes on the root, ex. fontSize:14px
        foStyleName: 'value', ...
    }           
}

Вот список атрибутов CSS, которые в настоящее время поддерживаются.

[
    'lineHeight', 
    'alignmentBaseline', 
    'backgroundImage', 'backgroundPosition', 'backgroundRepeat', 'backgroundColor',
    'baselineShift', 
    'border',
    'borderWidth', 'borderColor','borderStyle',
    'borderTop','borderLeft','borderRight','borderBotttom',
    'borderTopWidth','borderTopStyle','borderTopColor', 
    'borderBottomWidth','borderBottomStyle','borderBottomColor',
    'borderLeftWidth','borderLeftStyle','borderLeftColor',
    'borderRightWidth','borderRightStyle','borderRightColor',
    'borderCollapse',             
    'clear', 'color', 
    'display', 'direction', 'dominantBaseline', 
    'fill', 'float', 
    'fontStyle', 'fontVariant', 'fontWeight', 'fontSize', 'fontFamily', 
    'listStyleType', 'listStyleImage', 'letterSpacing', 
    'marginTop', 'marginBottom', 'marginLeft', 'marginRight','orphans', 
    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
    'pageBreakAfter', 'pageBreakBefore', 
    'tableLayout', 
    'textAlign', 'textAnchor','textDecoration', 'textIndent', 'textTransform', 
    'verticalAlign',
    'widows', 'wordSpacing', 'width'
]

Надеюсь это поможет!

Источник

Я создал простой и очень простой в использовании API, который использует библиотеку snappy, основанную на CLI на основе https://wkhtmltopdf.org/, основанной на webkit, для преобразования HTML-страницы из URL в PDF. Вот репозиторий Github: https://github.com/Dellos7/dhtml2pdf

Это пример того, как использовать его из тега привязки. Это покажет сгенерированный PDF из https://www.github.com сайт в новой вкладке браузера:

<a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=show" target="_blank">Show PDF</a>

Пример того, как использовать его для загрузки PDF:

<a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download&file_name=my_pdf">Download PDF</a>

С этим решением вам даже не нужно использовать JavaScript для создания вашего PDF.

Но если вам все еще нужно сделать это с помощью JavaScript, вы можете сделать это так:

document.getElementById("your-button-id").addEventListener("click", function() {
    var link = document.createElement('a');
    link.href = 'https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download';
    link.download = 'file.pdf';
    link.dispatchEvent(new MouseEvent('click'));
});

В репозитории я также объясняю, как очень легко клонировать и развернуть свой собственный API в Heroku, чтобы вы могли самостоятельно управлять API и не зависеть от внешних служб.

Источник

Попробуйте этот пакет npm htmlto. Он создает PDF из HTML с помощью стилей CSS

var htmlTo = require('htmlto')

htmlTo.pdf('./public/html/report.html','./public/pdf/report.pdf',{width: 2480, height: 3508})

установить:

npm install -S htmlto

npm install -S phantom

* вы также можете указать размер.phantom версию ^4.0.3 и версию узла v6.5.0 https://www.npmjs.com/package/htmlto

Источник
Другие вопросы по тегам