web-dev-qa-db-ja.com

HTMLページをPDFに変換してからダウンロードするには？

これは、HTMLとCSSで設計された私のWebページです。

PDFと同じWebページをダウンロードするにはどうすればよいですか？私は多くのソリューションを試していましたが、PDFファイル上のコンテンツのみを取得していますが、CSSスタイルでは取得していません。

解決策はありますか？

javascriptjquerycsshtml5pdf-generation
11
ajay

この投稿 で説明されているように、 jsPDF ライブラリを使用してそれを行うことができます。

必ず jQuery と jsPDF の両方をファイルに含めてください。

html2canvasJS を取得して、CSSを修正するためにドキュメント要素をキャンバスに変換します。

JS：

let doc = new jsPDF('p','pt','a4');

doc.addHTML(document.body,function() {
    doc.save('html.pdf');
});

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<div id="content">
  <h1 style="color:red">Hello World</h1>
  <p>this is a PDF</p>
</div>

デモ：JSFiddle

ボタンを使用してダウンロードをトリガーすることもできます（ 詳細については最初の投稿を参照 ）

20
Ivan

  1. jsPDF の最新バージョンをダウンロードします。

  2. プロジェクトに次のスクリプトを含めます。

    • jspdf.js
    • jspdf.plugin.from_html.js
    • jspdf.plugin.split_text_to_size.js
    • jspdf.plugin.standard_fonts_metrics.js
1
Kirit