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

Ответ 1

Существует новое облачное решение 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'
]

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

Ответ 2

попробуйте этот пакет 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

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

Ответ 3

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

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

<a href="#" onclick="location.href='https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=show'; return false;" target="_blank">Show PDF</a>

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

<a href="#" onclick="location.href='https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download&file_name=my_pdf'; return false;">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 и не зависеть от внешних сервисов.