jsを使ってhtmlをpdfに変換する-jsチュートリアル-php.cn

jsを使ってhtmlをpdfに変換する

php中世界最好的语言

リリース： 2018-03-20 09:55:06

オリジナル

3388 人が閲覧しました

今回は、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のスクリーンショットが原因なので、ここから解決しましょう。

オンラインで他の人が書いたケースを読み、私自身のテストと分析を組み合わせた後、インターセプトがボディのレベルで行われ、ボディがたまたま

overflow: hidden; に設定されている場合、超過が発生することがわかりました。このため、この部分は決してインターセプトされません。ノードの DOM 高さはウィンドウの表示高さであり、スクロールバーの余分な部分は含まれません。

そこで、スクロールバーノードのスタイルを 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 サイトの他の関連記事に注目してください。

推奨読書:

text-align が両端での位置合わせを実現する方法

JavaScript の継承とプロトタイプチェーン

以上がjsを使ってhtmlをpdfに変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。