ホームページ > 記事 > ウェブフロントエンド > jsを使ってhtmlをpdfに変換する
jsを使ってhtmlをpdfに変換する
- php中世界最好的语言オリジナル
- 2018-03-20 09:55:063377ブラウズ
今回は、jsを使用してhtmlをpdfに変換する場合と、jsを使用してhtmlをpdfに変換する場合の注意事項についてお届けします。実際のケースを見てみましょう。
そこで、この機能をテストするために小さなケースを作成しました。<body> <!-- PDF --> <p class="bb" id="ctn"> <p class="anliu" id="anliu">生成PDF</p> </p></body><script src="../../Scripts/aps/html2canvas.js"></script><script src="../../Scripts/aps/jsPdf.debug.js"></script>jsの書き方
window.onload =function(){var downPdf = document.getElementById("anliu");
downPdf.onclick = function() {
html2canvas(document.body, {
onrendered: function(canvas) { //返回图片URL，参数：图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0); //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4'); //需要dataUrl格式
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
pdf.save('tup.pdf');
}
});
}
}1. テストを書いた後、「HTMLCanvasElement」で「toDataURL」の実行に失敗しました: 汚染されたキャンバスはエクスポートできない可能性がありますというエラーが報告されました。 そこで方法を変えて、試しに写真を全て削除してクリックしてPDFを生成したところ、エラーの原因は写真にあったようです。 情報を確認したところ、画像とページが別ドメインにあり、端的に言うとサーバー環境でアクセスする必要があるため、クロスドメイン送信の問題が発生していました。ということで、サーバー環境でのテストでは問題なくpdfファイルが生成されました。
2、html2canvas.jsの不完全なスクリーンショットの問題
このテスト実装の関数をプロジェクトに組み込むと、生成されたPDFにはページウィンドウの表示領域しかないという新たな問題が発生しました。とスクロールバーのある下の部分が出てきません。 そこで、もう一度調べてみたところ、html2canvasはキャプチャされた画像の高さをサポートしていないことがわかりました。これにより、スクロールバーが表示される場合、スクリーンショットがブラウザに表示されるだけになり、画像全体がキャプチャされなくなります。スクリーンショットに基づいて jsPdf.js によって生成された PDF は不完全になります。 html2canvasのスクリーンショットが原因なので、ここから解決しましょう。 オンラインで他の人が書いたケースを読み、私自身のテストと分析を組み合わせた後、インターセプトがボディのレベルで行われ、ボディがたまたま そこで、スクロールバーノードのスタイルを height: auto; に変更して、子要素によって高さが引き伸ばされるようにしました。 上に移動してすべての親ノードを削除します。 overflow: hidden; 要素を非表示から削除します。 jquery導入後にプロジェクト内で書き換えられたjsを見てください var pdfcc = $('.pdf-cc');
pdfcc.on('click', function (event) {
html2canvas($("#bb-pdf-ctn"), {
allowTaint: true,
height: $("#bb-pdf-ctn").outerHeight(),
onrendered: function (canvas) { //返回图片URL，参数：图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0); //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4'); //需要dataUrl格式
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
pdf.save('pdf.pdf');
}
});
});3、html2canvasは2つの新しいパラメータを設定しましたAllowcross-domain:allowTaint:true,Set height:height: $("#bb -pdf- ctn").outerHeight(),height はスクロール バー ノードの高さです。 OK、これでスクロール バー領域の不完全なスクリーンショットの問題は解決されました。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がjsを使ってhtmlをpdfに変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。