jsPDF.jsを使って、要素内の画像や文章などのコンテンツをPDF化できます。
スマホ環境にも対応しています。
公式サイト

ソースコード

html2canvas.jsでコンテンツを画像化し、その画像をjsPDF.jsでPDF化します。

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

検証

PDFダウンロードボタンでPDFをダウンロードできます。
PC環境であればPDFプレビュー画面が表示され、この画面からダウンロードできます。
スマホ環境であればすぐにPDFダウンロードが開始されます。