JavaScriptまたはjqueryを使用してHTMLページをPDFとして保存することは可能ですか？

83

JavaScriptまたはjqueryを使用してHTMLページをPDFとして保存することは可能ですか？

詳細に：

テーブルを含む1つのHTMLページを生成しました。「PDFとして保存」ボタンが1つあります。ユーザーがそのボタンをクリックすると、そのHTMLページはPDFファイルとして変換する必要があります。

JavaScriptまたはjqueryを使用することは可能ですか？

javascript  jquery  jquery-ui 
— 羊
ソース
3
私の知る限り、JavascriptはPDFドキュメントを作成できません。
— Khoa Le 2011
1
最近は多くの人がPDFに印刷できます。そのため、その機能はほぼ間違いなく必要ありません。
— エリック
4
PDFはテキストベースの言語です。生成できないプログラミング言語を見つけるのは難しいでしょう。
— クエンティン2011
1
ここで可能な答え：stackoverflow.com/questions/12108806/...
— コリン・

回答:

28

はい、jspdfを使用してPDFファイルを作成します。

次に、それをデータURIに変換し、ダウンロードリンクをDOMに挿入できます。

ただし、HTMLからPDFへの変換は自分で作成する必要があります。

ページの印刷用バージョンを使用して、ユーザーがページの印刷方法を選択できるようにします。

編集：どうやらそれは最小限のサポートを持っています

したがって、答えは、独自のPDFライターを作成するか、既存のPDFライターに（サーバー上で）それを実行してもらうことです。

— レイノス
ソース
jspdfは面白そうに見えますが、デモはFirefox5.0でもIEでも機能しません。
— ティム・ビューテ2011
jspdfは機能のサポートが最小限であり、グラフィックスもサポートしていません。ただし、スタイルシステムやレンダリング機能がない限り、基本的には小さな音符にのみ役立ちます。それ以外の場合は、JSでもHTMLレンダラー全体を作成する必要があります（または、FirefoxでサポートされているdrawElementでcanvasをごまかして使用する必要があります）。私に言わせれば、Javascriptは実際にはこのコーディング行には対応していません。おそらく、外部Webサービスを呼び出すのが最も簡単な方法です。
— Jon Lennart Aasenden 2011
JavaScript（言語として）は完全にそれ次第です。ブラウザのセキュリティモデルとAPIの制限付きで実行されているJavaScriptはそれほどではありません。
— クエンティン2011
4
誰かがマッチやつまようじから家を建てることができると確信していますが、結局のところ、ステッチ、グラフィック、フォントの埋め込み、スタイル、完全に機能するルックアップテーブルをサポートする本格的なPDFコンパイラは問題外です。jspdfのソースを見てください-それは最も単純なタグのみをサポートし、ルックアップ辞書はサポートしていません。本格的なPDFコンパイラはC ++やDelphiでも実行するのが難しく、純粋なJS実装は自殺につながるでしょう。何年もの間、PDFコンパイラのみを販売している会社があります（たとえば、gnosticeを参照）。これは「ワンライナー」ではありません。
— Jon Lennart Aasenden 2011
@JonLennartAasendenはい、最小限のサポートしかありません。必要に応じて、jsでPDFライターを作成することもできます。しかし、それは簡単な作業ではありません。純粋なJS実装は、C ++やDelphiと同じくらい自殺的です。JSが二級市民であるふりをしないでください。
— Raynos 2011
15

ええ、JavaScriptで行うのはとても簡単です。このコードがお役に立てば幸いです。

JSpdfライブラリが必要です。

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

<script>
    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });

    // This code is collected but useful, click below to jsfiddle link.
</script>

jsfiddleリンクはこちら

— ブラックジョーカー
ソース
1
画像がPDFで印刷されない:(解決策がありますか??
— Maestro Vladimir
1
マルチページもCSSスタイルも適切にサポートしていません。
— 動的
1
テーブルをサポートしていません:(アプローチが
— 気に入りました
3
JSFiddleリンクは404ページにつながります
— オスカーチャンバー
7

Phantomjsを使用できます。ここからダウンロードし、次の例を使用してhtml-> pdf変換機能をテストしますhttps://github.com/ariya/phantomjs/blob/master/examples/rasterize.js

コード例：

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf
— singh1469
ソース
コマンドラインユーティリティの代わりにjavascriptで使用できますか？
— 動的
@Dynamicいいえ、これはjavascriptを介して制御できるヘッドレスブラウザです。javascriptを介してWebページをPDFに印刷するように指示できますが、実装はjavascriptではありません。ただし、印刷するページのキューを消費するアプリでラップすることで、この正確なシナリオに使用しました。JavaScriptを使用して、キューにエントリを追加します。同様に、サービスでラップすることもできます。クロム印刷と同じ制限の下にあるにもかかわらず、物事がどのように印刷されるかを制御するため（たとえば、印刷用ビューを作成するためのcssおよびjs）
— Shane
7

私はライブラリを使用jsPDFしてdom-to-imageHTMLをPDFにエクスポートしました。

関係者への参照としてここに投稿します。

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

デモ：https：//jsfiddle.net/viethien/md03wb21/27/

— ヒエングエン
ソース
レスポンシブモードに移動してPDFをダウンロードすると、PDFページが正しく表示されません。レスポンシブモードを使用してダウンロードした場合、デスクトップモードと同じ結果を得る方法はありますか。
— ナンシー
6

これが私がそれを行う方法です、そのアイデアは防弾設計ではありません、あなたはそれを修正する必要があります

  • ユーザーが[PDFとして保存]ボタンをクリックします
  • サーバーはajaxを使用して呼び出しを送信されます
  • サーバーはHTMLを使用して生成されたPDFのURLで応答します。私はApacheFOPを非常にうまく使用しました。
  • ajax応答を処理するjsはlocation.hrefを実行して、JSによって送信されたURLをポイントし、そのURLが読み込まれるとすぐに、添付ファイルとしてコンテンツ処理ヘッダーを使用してファイルを送信し、ユーザーにファイルのダウンロードを強制します。
— クマール
ソース
2

htmlをpdfサーバー側に変換する方がはるかに簡単で信頼性があります。GooglePuppeteerを使用しています。選択したサーバーサイド言語のラッパーで適切に管理されます。Puppeteerは、ヘッドレスChromeを使用してスクリーンショットやPDFファイルを生成します。特に表、画像、グラフ、複数のページなどを含む複雑なPDFファイルを生成する必要がある場合は、頭痛の種を大幅に減らすことができます。

https://developers.google.com/web/tools/puppeteer/

— MatejJanovčík
ソース
2

JavaScriptを使用してHTMLをPDfに変換するもう1つの非常に明白な方法があります。そのために、オンラインAPIを使用します。ユーザーがオフラインのときに変換を行う必要がない場合、これは正常に機能します。

PdfMageは、優れたAPIを備え、無料のアカウントを提供する1つのオプションです。私はあなたが多くの選択肢を見つけることができると確信しています（例えば、ここに）

PdfMage APIの場合、次のようになります。

 $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"<html><body>Hi there!</body></html>" },
    dataType: "json",
    headers: {
        "X-Api-Key": "your-key-here" // not very secure, but a valid option for non-public domains/intranet
    },
    success: function (response) {
        window.location = response.Data.DownloadUrl;
    },
    error: function (xhr, status) {
        alert("error");
    }
});
— アンドレ・ボルヘス
ソース
3
Freehtmltopdf.comはもう稼働していないようです
— Zach Saucier
1
残念ながら、PDFMageは無料ではなくなりました。
— プロメテウス
1

はい。たとえば、https：//grabz.itでソリューションを使用できます。

スクリーンショットを取得して操作するためにさまざまな方法で使用できるJavascriptAPIがあります。アプリで使用するには、まずアプリのキーとシークレットを取得し、無料のJavascriptSDKをダウンロードする必要があります。

それで、それを使用するための簡単な例を見てみましょう：

//first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag    
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>

次に、しばらく待つだけで、ページをリロードしなくても、画像がページの下部に自動的に表示されます。

それが最も簡単なものです。画像操作、要素へのスクリーンショットの添付などのその他の例については、ドキュメントを確認してください。

— ジョニー
ソース
1 

$('#cmd2').click(function() {
  	var options = {
		//'width': 800,
  	};
  	var pdf = new jsPDF('p', 'pt', 'a4');
  	pdf.addHTML($("#content2"), -1, 220, options, function() {
    	pdf.save('admit_card.pdf');
  	});
});
<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.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

<div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;">
                    	<div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;">
                        	<div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;">
                            	<h2>Entrance Exam Hall Ticket</h2>
                            </div>
                            <div class="parentdiv" style="display: inline-block;width: 100%;position: relative;">
                            	<div class="innerdiv" style="width: 80%;float: left;">
                            		<div class="restDet">
                                        <div class="div">
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Name</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>Santanu Patra</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>D.O.B.</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>17th April, 1995</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Address</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>P.S. Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Contact Number</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>9874563210</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Email Id</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>santanu@macallied.com</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Parent(s) Name</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>S. Patra</span><br /><span>7896541230</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Exam Center</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>Institute of Engineering & Management</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Hall Number</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>COM-32</span>
                                            </div>
                                        </div>
                                    </div>
                            	</div>
                                <div class="sideDiv" style="width: 20%;float: left;">
                                	<div class="atts" style="float: left;width: 100%;">
                                    	<div class="photo" style="width: 115px;height: 150px;float: right;">
                                        	<img src="images/candidateImg.gif" style="width: 100%;"/>
                                        </div>
                                        <div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;">
                                        	<small>Self Attested</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-info" id="cmd2">Download Token</button>
スニペットを展開

— サンタヌ
ソース
上記のコードは、私がテストしたどのブラウザでも機能しません。「トークンのダウンロード」ボタンをクリックしても何も起こらず、エラーは記録されません。確認していただけますか。
— Almeister9 2018年
0

要するに：いいえ。最初の問題はファイルシステムへのアクセスです。ほとんどのブラウザでは、セキュリティ上の理由からデフォルトでnoに設定されています。最近のブラウザは、データベースの形で最小限のストレージをサポートする場合があります。または、ファイルアクセスを有効にするようにユーザーに依頼することもできます。

ファイルシステムにアクセスできる場合、HTMLとして保存するのはそれほど難しくありません（JSドキュメントのファイルオブジェクトを参照してください）が、PDFはそれほど簡単ではありません。PDFは非常に高度なファイル形式であり、Javascriptにはあまり適していません。単語やクワッドなど、Javascriptで直接サポートされていないデータ型で情報を記述する必要があります。また、ファイルに保存する必要のある辞書検索システムを事前に定義する必要があります。誰かがそれを機能させることができると確信していますが、それに伴う労力と時間は、C ++またはDelphiの学習に費やしたほうがよいでしょう。

ただし、ユーザーが制限なしのアクセスを許可した場合、HTMLエクスポートは可能です。

— ジョン・レナート・アーセンデン
ソース
2
C ++とDelphiがPDFライターの作成に継承的に優れているのはなぜですか？
— Raynos 2011
2
それらの言語は高度なソフトウェアを作るために構築されたからです。Javascriptはそうではありませんでした。Javascriptが完成しなかったため、プロトタイプシステムがハングアウトしています。著者は、実際のクラスとより多くのデータ型を使用してHLを追加することを計画していましたが、時間がありませんでした。そのため、「現状有姿」で公開されました。ポインタをサポートしていません。生のメモリ割り当ては面倒です。他の言語で見られるネイティブデータ型の一部をサポートしていません。パック構造体（Cの構造体、Pascalのレコード）をサポートしていません...リストは無限です。私はJSが大好きですが、それはブラウザのおもちゃであり、実際の言語ではありません。
— Jon Lennart Aasenden 2011
そこにはJavaベースのライターが何人かいます。ソースコードのサイズを見ると、Javascriptではさらに長くなることはかなり自明ですが、重要な点は、IOフォーマットとルックアップテーブルです。 。誰かがそれを行うことができると確信していますが、それは非常に遅く、基本的に時間の無駄です。そして、どのようにフォントデータを埋め込みますか？OSからファイルを取得することはできません。ましてや、ファイル（それ自体がライブラリ全体）を変換して埋め込むこともできません。普通の家を建てることができるのに、なぜマッチの家を建てるのですか？
— Jon Lennart Aasenden 2011
2
「しかし、それはブラウザのおもちゃであり、実際の言語ではありません。」これは、Schemeが実際の言語ではないと言っているようなものです。「Javascripではさらに長くなることはかなり自明のはずです」、いいえ。JavaはJavaScriptよりもはるかに冗長です。Javaバージョンよりも約2/3短くする必要があります。「しかし、それは非常に遅く、基本的には」非常に遅いとは、C ++よりも3/4倍遅いという意味ですか？jsを二級市民として扱うのをやめてください。ありがとう。
— Raynos 2011
11
個人的な意見に関係なく、ジョンは、「Javascriptは実際の言語ではない」という主張をやめることができます。それはBSだからです。Javascriptは非常に強力な言語であり、CやC ++などの低レベルのコンパイル言語とは異なる目的に最適化されています。JSではCやC ++ではできないことがありますが、それはCやC ++が「本物の」言語ではないということですか？いいえ、それらはさまざまな目的のためのものです。JSは、他のチューリング完全言語と同じように本物のプログラミング言語です。
— アイソクロナス2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.