Q&A
>上記参考ページから、html2canvasとjsPDFを使用し、
画面のPDF出力を行っております。
まず、ご自身のコードを提示してください。
問題の再現ができないことには「崩れがある」「回避策はないか」と書かれても回答するために最も必要な情報がありません。
参考
上記参考ページから、html2canvasとjsPDFを使用し、
画面のPDF出力を行っております。
動作としては問題なくいっているのですが、以下について教えて頂きたいです。
・デフォルトA4サイズでのPDF化をjsPDFは行いますが、画面がスクロールが必要なほど長い場合、複数ページにして全てを出力するにはどうすればいいでしょうか。
・cssなど意識せずとも画面の内容をキャプチャしPDF化してくれていますが、一部cssに崩れがあります。
どうも、A4のサイズに合わせたために横幅がギュッとなってるような感じなのですが、回避策などご存じないでしょうか。
問題の再現ができないことには「崩れがある」「回避策はないか」と書かれても回答するために最も必要な情報がありません。
すいません、html文は載せることができません。
scriptは参考にしているところの通りです。
崩れがあるかどうか確認ではなく、使用されたことがある方で崩れた経験を持ち、
それを回避した経験がある方がいればと思い質問させて頂きました。
--
以下にサンプルコードを載せます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> 6<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> 7<script src="html2canvas.min.js"></script> 8<script> 9 function downloadImage() { 10 html2canvas(document.body).then(function(canvas) { 11 var imgWidth = 210; 12 var pageHeight = 295; 13 var imgHeight = ((canvas.height) * imgWidth)/canvas.width; 14 var heightLeft = imgHeight; 15 var imgData = canvas.toDataURL('image/png'); 16 var doc = new jsPDF('p', 'mm'); 17 var position = 0; 18 doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 19 heightLeft -= pageHeight; 20 while (heightLeft >= 0) { 21 position = heightLeft - imgHeight; 22 doc.addPage(); 23 doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 24 heightLeft -= pageHeight; 25 } 26 doc.save('file.pdf'); 27 }); 28 } 29</script> 30<style> 31 *{ 32 font-family:Geneva, Verdana, sans-serif; 33 } 34</style> 35</head> 36<body style="background-color:#EDF7FF;"> 37 <input id="downloadImageButton" type="button" value="画像保存" onclick="downloadImage();"/> 38 <div style="width:910px"> 39 <table border="1" cellspacing="0" cellpadding="0" style="width:100%;text-align:center"> 40 <tr> 41 <th style="width:40px">No.</th> 42 <th style="width:80px"><a href="#">項目１</a></span></th> 43 <th style="width:80px"><a href="#">項目２</a></span></th> 44 <th style="width:80px"><a href="#">項目３</a></span></th> 45 <th style="width:80px">項目４</th> 46 <th style="width:80px">項目５</th> 47 <th style="width:80px">項目６</th> 48 <th style="width:80px">項目７</th> 49 <th style="width:80px">項目８</th> 50 <th style="width:80px">項目９</th> 51 </tr> 52 <tr> 53 <td><label>1</label></td> 54 <td><label>item1</label></td> 55 <td><label>item2</label></td> 56 <td><label>item3</label></td> 57 <td><label>item4</label></td> 58 <td><label>item5</label></td> 59 <td><label>2019/04/01</label>～<br><label>2020/03/31</label></td> 60 <td><label>ああああああああああああああああああああああああああああああ</label></td> 61 <td><label></label></td> 62 <td><a href="#">item6</a></td> 63 </tr> 64 <tr> 65 <td><label>2</label></td> 66 <td><label>item1</label></td> 67 <td><label>item2</label></td> 68 <td><label>item3</label></td> 69 <td><label>item4</label></td> 70 <td><label>item5</label></td> 71 <td><label>2019/04/01</label>～<br><label>2020/03/31</label></td> 72 <td><label>ああああああああああああああああああああああああああああああ</label></td> 73 <td><label></label></td> 74 <td><a href="#">item6</a></td> 75 </tr> 76 </table> 77 </div> 78</body> 79</html>
例えば、これの場合FireFoxだと項目１～項目３のリンクの下線が文字に被っています。
また、項目６の日付が「～」とかぶってます。
IE11ではなぜか罫線が出ませんでした。
（それは本来のページでは起こっていませんので、cssの問題があるのだと思いますが。）
また、html2canvasは1.0.0-alpha12です。
なるほどそれなら仕方ないですね。
「崩れ方は色々あって現象も原因も様々なのに再現確認できる情報なしにアドバイスしようがない」
と感じる人が多数かと思いますが、がんばってください。
回答1件
0
ベストアンサー
参考サイトをのコードを使って、縦長ページを全て出力できるように改造してみました。
javascript
1 2function downloadImage() { 3 html2canvas(document.body, { 4 onrendered: function(canvas) { 5 6 //PDF用意して 7 var pdf = new jsPDF(); 8 //横幅と 9 var width = pdf.internal.pageSize.width; 10 //高さを取る 11 var height = pdf.internal.pageSize.height; 12 13 //ページ画像の横幅を取って 14 var canvas_width = canvas.width; 15 //横の縮小率を確認。 16 var rate = canvas_width > width ? width / canvas_width : canvas_width / width; 17 18 //縮小率を使って、PDFに埋め込んだ場合の高さを算出 19 var just_canvas_height = canvas.height * rate; 20 21 //埋め込み画像の高さを超えるまで、ページの追加と、画像の貼り付けを繰り返す 22 var setheight = 0; 23 while(setheight < just_canvas_height){ 24 if(setheight > 0){//2ページ目以降だけページ追加 25 pdf.addPage(); 26 } 27 //画像の貼り付けの「y」の位置をずらします 28 pdf.addImage(canvas, 'JPEG', 0, setheight*-1, width, 0); 29 30 //1ページ分追加 31 setheight += height; 32 } 33 //保存 34 pdf.save('test.pdf'); 35 } 36 }); 37}
ページの画像の高さからほぼぴったりで計算しているので、
当然、HTML内の文字や画像が横半分になって、2ページにまたがったりします。。
HTML内の画像は仕方ないとしても、文字はそれだと読めないので問題かなぁと思ったりしましたが、そこらへんは、フォントサイズとかを考えての調整かと思うので、お任せしますね。
A4のサイズに合わせたために横幅がギュッとなってる
というのが、私の適当に作ったテストページと、参考サイトをのコードでは再現できなかったので、そちらについてはわかりません。。。
mts10806さんがコメントされているように、「崩れ方は色々あって現象も原因も様々」です。
HTMLは全てではなくてもいいので、「ギュッとなってる」のを再現できる程度の最低限のHTMLとcssを提示できませんか？
投稿2019/02/05 09:12
総合スコア1910
回答ありがとうございます。
こちらの方でも調べて同じようなやり方で複数ページは出力できるようになりましたが、FireFoxの場合に途中で切れてしまっており全てが出力出来ておらず、その辺は継続調査中です。。。
また、崩れの件は一旦サンプルを作成しましたので、質問に載せます。
（途中で崩れるのは再現出来ていません、、）
>A4のサイズに合わせたために横幅がギュッとなってる
これについては、どうやらcssがちゃんと当たってなさそうです。
全てのcssがあたってないわけではなくfont-sizeをcssファイルでsmallにしていますが、
それだけが当たってないように見えており、タグに直接style=の形で記入するとあたっております。
私が確認している現象とは違うのでしょうかね・・？？
cssファイルでfont-size:small;を指定してみましたが、ブラウザ上でも、PDFにもきちんと反映されていましたよ。
こちらで確認する限り、横幅がぎゅっとなってしまう原因は、
var imgHeight = ((canvas.height+701) * imgWidth)/canvas.width;
この計算式のimgHeightを指定していることのように思うのですが、これはどのような意図で計算・指定されているのでしょうか？
>var imgHeight = ((canvas.height+701) * imgWidth)/canvas.width;
申し訳ありません、式としては提示頂いたスクリプトと同じで、比率を考慮した高さなんですが、
「701」の数値はテストで入れただけであり、本来は
var imgHeight = ((canvas.height+701) * imgWidth)/canvas.width;
でした、すいません。
ただ、現象は発生しなかったというところで何かほかに考慮があるのかもしれません。
現状はfirefoxでのみ崩れるので一旦この回答をベストアンサーとさせて頂いて、もう少しこちらで調査してみます。
ありがとうございました。
あなたの回答
tips
プレビュー
