jsPDFの練習(htmlの例)

README

jsPDF - Create PDFs with HTML5 JavaScript Library
http://jspdf.com/

の練習
htmlをpdfにしてみます

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
  font: 30px sans-serif;
}

h1, table, tr, td {
    border:solid thin gray;
}

jsdoit.html

<script type="text/javascript" src="http://jspdf.com/jspdf.js"></script>
<script type="text/javascript" src="http://jspdf.com/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="http://jspdf.com/libs/Blob.js/Blob.js"></script>
<script type="text/javascript" src="http://jspdf.com/libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="http://jspdf.com/libs/Deflate/deflate.js"></script>
<script type="text/javascript" src="http://jspdf.com/libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="http://jspdf.com/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="http://jspdf.com/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="http://jspdf.com/jspdf.plugin.ie_below_9_shim.js"></script>
<script type="text/javascript" src="http://jspdf.com/jspdf.plugin.sillysvgrenderer.js"></script>
<script type="text/javascript" src="http://jspdf.com/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="http://jspdf.com/jspdf.plugin.standard_fonts_metrics.js"></script>

<div id="target">
    <h1>text</h1>
    sample
    <span style="color:blue">sample</span>
    sample
    
    <h1>table</h1>
    <table>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>c</td>
            <td>d</td>
        </tr>
    </table>
</div>


<iframe class="preview-pane" width="100%" height="650" frameborder="0"></iframe>

jsdoit.js

// forked from Akiyah's "jsPDFの練習" http://jsdo.it/Akiyah/heBe
var doc = new jsPDF();


// We'll make our own renderer to skip this editor
var specialElementHandlers = {
	'#editor': function(element, renderer){
		return true;
	}
};

doc.fromHTML($('#target').get(0), 15, 15, {
	'width': 170, 
	'elementHandlers': specialElementHandlers
});


var string = doc.output('datauristring');
$('.preview-pane').attr('src', string);