前回の記事で、Canvas が Web ページをスクリーンショットして画像に変換することについて説明しました。これには、Web ページをスクリーンショットして、ユーザーがダウンロードできるように PDF ファイルとして保存するという新しい要件があります。
Canvas を使用して Web ページを PDF ファイルとして保存すると、クロスドメインがサポートされます
文章要件: ユーザーは「ダウンロード」をクリックし、ページを PDF ファイルとして保存してダウンロードします。
アイデア: 引き続き Canvas を使用してスクリーンショットを撮り、キャンバスのコンテンツを PDF ファイルに変換します。
まず、js ファイル jspdf.debug.js のダウンロード パス https://github.com/MrRio/jsPDF を導入する必要があります。
Canvasのjsファイルの紹介、公式サイトホームページのjsファイル取得アドレス：http://html2canvas.hertzen.com/
<script type=text/javascript src=js/html2canvas.js></script><script type=text/javascript src=js/html2canvas.min.js></script><script type=text/javascript src=js /jspdf.debug.js></script>
divボタンコード
<div id=down_pdf>PDF にエクスポート ボタン</div> <div class=sta-main>PDF として取得する必要がある div</div>
jspコード
<script type=text/javascript>/* var downPdf = document.getElementById(down_pdf); */var downPdf = document.getElementById(down_pdf);$(#down_pdf).on(click, function() { var Canvas2 = document .createElement(canvas); let _canvas = document.querySelector('.sta-main'); //幅と高さを取得します var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); //キャンバス キャンバスを 2 倍に拡大し、ぼかしを処理するために小さなコンテナに配置します。 = w * 2; キャンバス2.高さ = h * 2; キャンバス2.スタイル.幅 = w + ピクセルpx; var context = Canvas2.getContext(2d); // プロセスのオフセット context.scale(1.5, 1.5); // 背景色を変更します。デフォルトは黒です $('.sta-main').css(background, # fff) html2canvas( _canvas, { //クロスドメイン PDF がクロスドメイン情報を取得できない問題を処理する taintTest : false, useCORS : true,allowTaint : false, Canvas : Canvas2, dpi: 172, //PDF の明瞭度をエクスポート: function (canvas) { var contentWidth = Canvas.width; var contentHeight = Canvas.height; //PDF の 1 ページに、HTML ページによって生成されたキャンバスの高さが表示されます。 * 841.89 ; //PDF が生成されない場合の HTML ページの高さ var leftHeight = contentHeight = 0; //PDF 画像内の HTML ページによって生成されるキャンバスの幅と高さ (a4 用紙のサイズ [595.28,841.89]) var imgWidth = 595.28 / contentWidth * contentHeight( 'image/jpeg ', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //区別する必要がある高さは 2 つあり、1 つは HTML ページの実際の高さと、生成される PDF のページの高さです (841.89) // コンテンツが表示範囲を超えない場合PDF ページの場合、ページングは必要ありません if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0); pdf.addImage(pageData, 'JPEG', 0,position, imgWidth, imgHeight) leftHeight -= pageHeight; //空白ページの追加を回避します if (leftHeight > 0) { pdf.addPage() } } pdf.save('PDF 名.pdf') } }) $('.sta-main').css(background, )})</script>今回は Web ページが PDF に変更され、Web ページの最後のスクリーンショットは PNG に変更されます。同じテクノロジーを使用しています。どちらも Canvas を使用して最初にキャンバスをキャプチャし、次に形式を変換します。
オフセット、ブラー、クロスドメインなどの問題もありますが、これらは前のコードを使用して対処できます。
PDF に変換すると、CSS スタイルを使用して背景色を変更するだけで背景色が黒になります。
pdfへの完璧な変換。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。