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); } }); }