Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Adding example of `fromHTML` plugin usage

  • Loading branch information...
commit 12f29d7c31013c2cf64e527ca5f1a960cdaf4fb3 1 parent 6e72e17
Daniel Dotsenko authored
Showing with 84 additions and 1 deletion.
  1. +50 −1 examples/basic.html
  2. +34 −0 examples/js/basic.js
View
51 examples/basic.html
@@ -10,7 +10,7 @@
<script type="text/javascript" src="../jspdf.js"></script>
<script type="text/javascript" src="../jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="../jspdf.plugin.split_text_to_size.js"></script>
-
+ <script type="text/javascript" src="../jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script>
@@ -206,6 +206,55 @@
pdf.output('dataurl')</pre>
<a href="javascript:demoStringSplitting()" class="button">Run Code</a></p></div>
+<h2><a href="#">fromHTML plugin</a></h2>
+<div>
+<div><p>This (BETA level. API is subject to change!) plugin allows one to scrape formatted text from an HTML fragment into PDF. Font size, styles are copied. The long-running text is split to stated content width.</p></div>
+<div style="border-width: 2px; border-style: dotted; padding: 1em; font-size:120%;line-height: 1.5em;" id="fromHTMLtestdiv">
+<h2 style="font-size:120%">Header Two</h2>
+<strong><em>Double style span</em></strong>
+<span style="font-family:monospace">Monotype span with
+carriage return. </span><span style="font-size:300%">a humongous font size span.</span>
+Followed by long parent-less text node. asdf qwer asdf zxcv qsasfd qwer qwasfd zcxv sdf qwer qwe sdf wer qwer asdf zxv.
+<div <span style="font-family:serif">Serif Inner DIV (bad markup, but testing block detection)</div><span style="font-family:sans-serif"> Sans-serif span with extra spaces </span>
+Followed by text node without any wrapping element. <span>And some long long text span attached at the end to test line wrap. qwer asdf qwer lkjh asdf zxvc safd qwer wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww qewr asdf zxcv.</span>
+<p style="font-size:120%">This is a <em style="font-size:120%">new</em> paragraph.</p>
+This is more wrapping-less text.
+<p id="bypassme" style="font-size:120%">This paragraph will <strong style="font-size:120%">NOT</strong> be on resulting PDF because a special attached element handler will be looking for the ID - 'bypassme' - and should bypass rendering it.</p>
+<p style="font-size:120%">This is <strong style="font-size:120%">another</strong> paragraph.</p>
+</div>
+<div><p><pre>var pdf = new jsPDF('p','in','letter')
+
+// source can be HTML-formatted string, or a reference
+// to an actual DOM element from which the text will be scraped.
+, source = $('#fromHTMLtestdiv')[0]
+
+// we support special element handlers. Register them with jQuery-style
+// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
+// There is no support for any other type of selectors
+// (class, of compound) at this time.
+, specialElementHandlers = {
+ // element with id of "bypass" - jQuery style selector
+ '#bypassme': function(element, renderer){
+ // true = "handled elsewhere, bypass text extraction"
+ return true
+ }
+}
+
+// all coords and widths are in jsPDF instance's declared units
+// 'inches' in this case
+pdf.fromHTML(
+ source // HTML string or DOM elem ref.
+ , 0.5 // x coord
+ , 0.5 // y coord
+ , {
+ 'width':7.5 // max width of content on PDF
+ , 'elementHandlers': specialElementHandlers
+ }
+)
+
+pdf.output()</pre>
+<a href="javascript:demoFromHTML()" class="button">Run Code</a></p></div></div>
+
</div>
</div>
View
34 examples/js/basic.js
@@ -305,4 +305,38 @@ function demoStringSplitting() {
}
pdf.output('dataurl')
+}
+
+function demoFromHTML() {
+ var pdf = new jsPDF('p','in','letter')
+
+ // source can be HTML-formatted string, or a reference
+ // to an actual DOM element from which the text will be scraped.
+ , source = $('#fromHTMLtestdiv')[0]
+
+ // we support special element handlers. Register them with jQuery-style
+ // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
+ // There is no support for any other type of selectors
+ // (class, of compound) at this time.
+ , specialElementHandlers = {
+ // element with id of "bypass" - jQuery style selector
+ '#bypassme': function(element, renderer){
+ // true = "handled elsewhere, bypass text extraction"
+ return true
+ }
+ }
+
+ // all coords and widths are in jsPDF instance's declared units
+ // 'inches' in this case
+ pdf.fromHTML(
+ source // HTML string or DOM elem ref.
+ , 0.5 // x coord
+ , 0.5 // y coord
+ , {
+ 'width':7.5 // max width of content on PDF
+ , 'elementHandlers': specialElementHandlers
+ }
+ )
+
+ pdf.output('dataurl')
}
Please sign in to comment.
Something went wrong with that request. Please try again.