web-dev-qa-db-ja.com

HTML WebページからPDFを生成する方法は？

ボタンからのクリックイベントの後、WebページをPDFファイルに変換するライブラリを探しています。jspdfを試していますが、CSSなしで印刷します。 JavaScript/jQueryを使用してこれを作成し、CSSを保持するにはどうすればよいですか？または、選択可能な別のCSSを使用するにはどうすればよいですか？

javascriptjqueryhtml5pdfcss-to-pdf
22
Alejandro Hinestrosa

HTMLページとそのCSS（印刷メディアルールを含む）をPDFにレンダリングする新しいjQuery +クラウドソリューションがあります。解決策は、Webページの任意の領域を印刷するようにセットアップすることです。印刷するコンテナ要素をフォーマッターに伝えるだけで、残りはライブラリが処理します。返されるのは埋め込み可能なPDFまたはバックエンドがダウンロードのためにPDFをプッシュバックします。

ライブラリ（GitHub）は次のとおりです。
https://github.com/Xportability/css-to-pdf

ここにあなたのフィドルがあります：
http://jsfiddle.net/kstubs/jrtM5/

これが実際のデモです。
http://xep.cloudformatter.com/doc/

現在、使用方法の指示はありませんが、サンプル（ソースを表示）に沿って説明するのはかなり自明です（「印刷」ボタンを探してください）。

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'
]

お役に立てれば！

11
kstubs

このnpmパッケージhtmltoを試してください。CSSスタイリングを使用して、htmlからPDF

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

* dimensions.phantomバージョン^ 4.0.3およびノー​​ドバージョンv6.5.0を指定することもできます https://www.npmjs.com/package/htmlto

1
dev07

URLからHTMLページを変換するために、 wkhtmltopdf webkitベースのCLIに基づいて snappy ライブラリを使用するシンプルで非常に使いやすいAPIを作成しました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>

このソリューションを使用すると、PDFを生成するためにJavaScriptを使用する必要さえありません。

ただし、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を Herok で非常に簡単に複製およびデプロイする方法も説明しています。これにより、外部サービスに依存せずにAPIを自分で管理できます。

1
David López