html
<script src="jquery.js"></script> <script src="html2canvas.js"></script> <script src="jspdf.min.js"></script> ~略~ <div id = "test1" style="background-color:white"> うゐのおくやまけふこえてあさきゆめみしゑひもせす<br> <input type="button" value="PDFダウンロード" onclick="test1()" class="btn btn-success" /><br> <img id = "img1" src="imori.jpg" /><br> </div> <iframe id="renderSpace" frameborder="0" width="450" height="450"></iframe>
js
function test1(){
// コンテンツ化を画像化します。
html2canvas(document.getElementById("test1"), {
onrendered: function (canvas) {
// コンテンツの画像化が完了したら以下の処理を行います。
// コンテンツの画像データを取得します。
var dataURI = canvas.toDataURL("image/jpeg");
// jsPDFを生成し、画像データを渡します。
var pdf = new jsPDF();
pdf.addImage(dataURI, 'JPEG', 0, 0);
// とりこんだ画像データからレンダリングデータを作成し、PDFプレビュー画面を表示します。
var renderString = pdf.output("datauristring");
$("iframe").attr("src", renderString);
}
});
}
