JSであなたと共有し、今日にHTMLや知識のPDFダウンロードを生成します。
1 html2canvas
はじめに
私たちは、ブラウザで直接全部または一部のページ「のショットを。」html2canvasを使用することができます しかし、これは実際に撮影していないが、すべての要素と対応するスタイルに収集情報へのDOM構造を、横断キャンバス画像をレンダリングすることによってページ。
html2canvasのみが扱うことができるキャンバス画像を生成し、したがって結果は、元と100％一致しないレンダリングすることができるからです。しかし、それは参加するサーバーを必要としない、全体像は非常に簡単に使用する、クライアントのブラウザによって生成されます。
使用する
APIの使用は非常に簡単で、次のコードでは、キャンバスとしてレンダリング要素とすることができます。
html2canvas(element, {onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
}
});
キャンバスは、ページに挿入するように、onrenderedコールバックメソッドによって生成することができます。
html2canvas(element, {onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
次のように小さい（DEMO1）コードする実施例である：<HTML>
<head>
<title>html2canvas example</title>
<style type="text/css">...</style>
</head>
<body>
<header>
<nav>
<ul>
<li>one</li>
...
</ul>
</nav>
</header>
<section>
<aside>
<h3>it is a title</h3>
<a href="">Stone Giant</a>
...
</aside>
<article>
<img src="./Stone.png">
<h2>Stone Giant</h2>
<p>Coming ... </p>
<p>以一团石头...</p>
</article>
</section>
<footer>write by linwalker @2017</footer>
<script type="text/javascript" src="./html2canvas.js"></script>
<script type="text/javascript">
html2canvas(document.body, {
onrendered:function(canvas) {
document.body.appendChild(canvas)
}
})
</script>
</body>
</html>
本文ページの要素のこの実施例は、キャンバスに描画され、体内に挿入されます。
2 jsPDF
jsPDFライブラリブラウザは、PDFを生成するために使用することができます。
テキストPDF生成
、次の方法を使用しました：
// 默认a4大小，竖直方向，mm单位的PDF
var doc = new jsPDF();
// 添加文本‘Download PDF’
doc.text('Download PDF!', 10, 10);
doc.save('a4.pdf');
画像のPDF生成
、次の方法を使用しました：
// 三个参数，第一个方向，第二个单位，第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 115])
// 将图片转化为
dataUrlvar imageData = ‘data:image/png;base64,iVBORw0KGgo...’;
doc.addImage(imageData, 'PNG', 0, 0, 205, 115);
doc.save('a4.pdf');
テキストと画像PDFを生成：
// 三个参数，第一个方向，第二个尺寸，第三个尺寸格式
var doc = new jsPDF('landscape','pt',[205, 155])
// 将图片转化为
dataUrlvar imageData = ‘data:image/png;base64,iVBORw0KGgo...’;
//设置字体大小
doc.setFontSize(20);
//10,20这两参数控制文字距离左边，与上边的距离
doc.text('Stone', 10, 20);
// 0, 40, 控制文字距离左边，与上边的距离
doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
doc.save('a4.pdf')
jsPDFインスタンスに変換生成する要素を追加したPDFの必要性、追加のHTML機能がありますが、いくつかの要素がPDFで生成することができない、PDFにhtml2canvas + jsPDF方法のページを使用することが可能です。
html2canvasによってページ要素を横断し、キャンバスで描画し、jsPDFインスタンスにキャンバス画像フォーマットを追加し、PDFを生成します。
3 html2canvas + jsPDF
リーフレット
修飾のDEMO1例：
<script type="text/javascript" src="./js/jsPdf.debug.js">
</script><script type="text/javascript">
var downPdf = document.getElementById("renderPdf");
downPdf.onclick = function() {
html2canvas(document.body, {
onrendered:function(canvas) {
//返回图片dataURL，参数：图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4');
//addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
pdf.save('stone.pdf'); } }) }
</script>
A4、A4用紙の高さの変換比率に基づいて、ページのコンテンツは、それの高さを超えた場合、生成されたPDFはどうなりますか？ページングをしますか？
あなたは自分のアイデアをテストする、試すことができます。
jsPDF APIは、ディスプレイに画像PDFページを与え、その後に有用、のaddPage（）、私たちはpdf.addPage（）、追加することができ、PDF、pdf.addImage（...）を提供します。
だから、どのように我々はどこページネーションを決定するのですか？
さて、この質問に答えるために、我々は次のページのPDFにコンテンツの高さを超えて、のpageHeightを設定することができます。
彼の考えはストロークに、HTMLページのコンテンツキャンバスの絵を生成、PDFにaddImageページによって追加された最初の画像、1以上の内容、のaddPage（）でPDFのページを追加し、addImageにより、次のページに画像を追加PDF。
〜ああ、よく！バートは、その問題が見つかりませんか？
ページaddImageの内部によって、我々は、最初の完全なページ生成されたコンテンツキャンバス画像、ニンジン対応のpageHeightに基づく小画像にピットを分割し、ページ - - このメソッドの実装の前提です。
？我々はキャンバスに腫れていると思う何を、以下で直接見て、プルアップはありません。
html2canvas(document.body, {
onrendered:function(canvas) {
//it is here we handle the canvas
}
})
ここで、本体はcanvas要素オブジェクトを生成することで、キャンバスを生成するための要素と、それから私達はあるキャンバスものを、必要とします。。。
あなたが可能と思いますか？私も見つかった場合は、その後、（要素、オプション）htnl2canvasによって処理され、ページ上の異なる場所でDOM要素を取得するには、この考え方に基づいて、現実を考えていない、私はちょうど話さないだろうやるそれぞれのpageHeightの位置にあるだけでDOM要素を見つけることができません、そして疲れてそうします。
:)疲れて、あなたは、このアプローチを見てみることができます。
マルチページ
Iが提供するアイデアは、それはあなたが親要素のPDFの内容に変身したいという変換素子があるため、我々は唯一、キャンバスを生成することで、このデモでは体が存在し、他の変わらない、しかしのaddPageにも、複数のコンテンツそしてaddImageは、しかし、ここで追加したのと同じキャンバスです。
もちろん、複数ページのPDFファイルは、それだけで終わりで正しいページ表示を達成するためにどのように表示されます繰り返し。実際には、主な利点jsPDF二つの点：
- jsPDF含有量よりもフォーマットサイズの例は、表示されていない（VARのPDF = newjsPDF（ ''、 'PT' は、 'A4'）;は、用紙サイズがA4であるデモ）
- addImage PDFで画像位置を制御するには、2つのパラメータがあります
画像は、各ページのPDFファイルに表示されるものの、同じですが、私たちは絵の位置、妄想ページングを調整します。
2ページ目では、例えば、高さ-841.89すなわち紙A4、A4であり、垂直方向にオフセットに設けられても高さ範囲にわたって紙は、垂直方向の画像、2ページ目が表示画像が表示されないのでようにページングの影響を与え、そして[841.89,1682.78]の範囲内のコンテンツ。
またはコード、それを見て：
html2canvas(document.body, {
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是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;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('content.pdf');
}
})
マージン辺左
次のように変更imgWidth、あなたaddImageマージンに設定するX方向パラメータ、特定のコードを：
var imgWidth = 555.28;
var imgHeight = 555.28/contentWidth * contentHeight;
...
pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
...
pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight);
JSは、HTMLおよびPDFのダウンロードを生成について、あなたはどのくらいを学びますか？コメントは、コメント領域に歓迎されています！
