Skip to content

Commit e8da3e2

Browse files
MrRioMrRio
authored
Merge pull request parallax#892 from MrRio/feature/docs
Improve the documentation
2 parents 767ed8a + b1f29ec commit e8da3e2

34 files changed

Lines changed: 390 additions & 63 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
.DS_Store
33
node_modules/
44
coverage/
5+
npm-debug.log

‎README.md‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,41 @@
88

99
You can [catch me on twitter](http://twitter.com/MrRio): [@MrRio](http://twitter.com/MrRio) or head over to [my company's website](http://parall.ax) for consultancy.
1010

11+
## [Live Demo](http://rawgit.com/MrRio/jsPDF/master/) | [Documentation](http://rawgit.com/MrRio/jsPDF/master/docs/)
12+
1113
## Creating your first document
1214

13-
See examples/basic.html. There's a live editor example at index.html.
15+
The easiest way to get started is to drop the CDN hosted library into your page:
16+
17+
```html
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
19+
```
20+
21+
Then you're ready to start making your document:
22+
23+
```javascript
24+
// Default export is a4 paper, portrait, using milimeters for units
25+
var doc = new jsPDF()
26+
27+
doc.text('Hello world!', 10, 10)
28+
doc.save('a4.pdf')
29+
```
30+
31+
If you want to change the paper size, orientation, or units, you can do:
1432

1533
```javascript
16-
var doc = new jsPDF();
17-
doc.text(20, 20, 'Hello world.');
18-
doc.save('Test.pdf');
34+
// Landscape export, 2×4 inches
35+
var doc = new jsPDF({
36+
orientation: 'landscape',
37+
unit: 'in',
38+
format: [4, 2]
39+
})
40+
41+
doc.text('Hello world!', 10, 10)
42+
doc.save('two-by-four.pdf')
1943
```
2044

21-
**Head over to [jsPDF.com](http://jspdf.com) for details or [_here_](http://mrrio.github.io/jsPDF/) for our most recent live editor and examples.**
45+
Great! Now give us a Star :)
2246

2347
## Contributing
2448
Build the library with `npm run build`. This will fetch all dependencies and then compile the `dist` files. To see the examples locally you can start a web server with `npm start` and go to `localhost:8000`.

‎RELEASE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ Release Instructions
33

44
- Add a new draft release in GitHub.
55
- Describe the Release
6+
- Update the CDN link in the README (@TODO: Automate?)
67
- `npm version 1.x.y`
78
- git push origin v1.x.y
89
- Publish the release on GitHub

‎docs/global.html‎

Lines changed: 145 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<label for="nav-trigger" class="overlay"></label>
2323

2424
<nav>
25-
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="jsPDF.html">jsPDF</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addFont">addFont</a></li><li><a href="global.html#addMetadata">addMetadata</a></li><li><a href="global.html#addPage">addPage</a></li><li><a href="global.html#CapJoinStyles">CapJoinStyles</a></li><li><a href="global.html#circle">circle</a></li><li><a href="global.html#ellipse">ellipse</a></li><li><a href="global.html#getFontList">getFontList</a></li><li><a href="global.html#lines">lines</a></li><li><a href="global.html#lstext">lstext</a></li><li><a href="global.html#output">output</a></li><li><a href="global.html#rect">rect</a></li><li><a href="global.html#roundedRect">roundedRect</a></li><li><a href="global.html#save">save</a></li><li><a href="global.html#setDisplayMode">setDisplayMode</a></li><li><a href="global.html#setDrawColor">setDrawColor</a></li><li><a href="global.html#setFillColor">setFillColor</a></li><li><a href="global.html#setFont">setFont</a></li><li><a href="global.html#setFontSize">setFontSize</a></li><li><a href="global.html#setFontStyle">setFontStyle</a></li><li><a href="global.html#setLineCap">setLineCap</a></li><li><a href="global.html#setLineJoin">setLineJoin</a></li><li><a href="global.html#setLineWidth">setLineWidth</a></li><li><a href="global.html#setPage">setPage</a></li><li><a href="global.html#setProperties">setProperties</a></li><li><a href="global.html#setTextColor">setTextColor</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#triangle">triangle</a></li></ul>
25+
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="jsPDF.html">jsPDF</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addFont">addFont</a></li><li><a href="global.html#addHTML">addHTML</a></li><li><a href="global.html#addMetadata">addMetadata</a></li><li><a href="global.html#addPage">addPage</a></li><li><a href="global.html#autoPrint">autoPrint</a></li><li><a href="global.html#CapJoinStyles">CapJoinStyles</a></li><li><a href="global.html#circle">circle</a></li><li><a href="global.html#ellipse">ellipse</a></li><li><a href="global.html#getFontList">getFontList</a></li><li><a href="global.html#lines">lines</a></li><li><a href="global.html#lstext">lstext</a></li><li><a href="global.html#output">output</a></li><li><a href="global.html#rect">rect</a></li><li><a href="global.html#roundedRect">roundedRect</a></li><li><a href="global.html#save">save</a></li><li><a href="global.html#setDisplayMode">setDisplayMode</a></li><li><a href="global.html#setDrawColor">setDrawColor</a></li><li><a href="global.html#setFillColor">setFillColor</a></li><li><a href="global.html#setFont">setFont</a></li><li><a href="global.html#setFontSize">setFontSize</a></li><li><a href="global.html#setFontStyle">setFontStyle</a></li><li><a href="global.html#setLineCap">setLineCap</a></li><li><a href="global.html#setLineJoin">setLineJoin</a></li><li><a href="global.html#setLineWidth">setLineWidth</a></li><li><a href="global.html#setPage">setPage</a></li><li><a href="global.html#setProperties">setProperties</a></li><li><a href="global.html#setTextColor">setTextColor</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#triangle">triangle</a></li></ul>
2626
</nav>
2727

2828
<div id="main">
@@ -110,6 +110,146 @@ <h3 class="subsection-title">Members</h3>
110110

111111

112112

113+
<h4 class="name" id="addHTML"><span class="type-signature"></span>addHTML<span class="type-signature"></span></h4>
114+
115+
116+
117+
118+
119+
<dl class="details">
120+
121+
122+
<dt class="tag-source">Source:</dt>
123+
<dd class="tag-source"><ul class="dummy"><li>
124+
<a href="plugins_addhtml.js.html">plugins/addhtml.js</a>, <a href="plugins_addhtml.js.html#line12">line 12</a>
125+
</li></ul></dd>
126+
127+
128+
129+
130+
131+
132+
133+
134+
135+
136+
137+
138+
139+
140+
141+
142+
143+
<dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li><p>This is being replace with a vector-supporting API. See
144+
<a href="https://cdn.rawgit.com/MrRio/jsPDF/master/examples/html2pdf/showcase_supported_html.html">this link</a></p></li></ul></dd>
145+
146+
147+
148+
149+
150+
151+
152+
153+
154+
155+
156+
157+
158+
159+
160+
</dl>
161+
162+
163+
164+
165+
166+
<div class="description">
167+
<p>Renders an HTML element to canvas object which added to the PDF</p>
168+
<p>This feature requires <a href="https://github.com/niklasvh/html2canvas">html2canvas</a>
169+
or <a href="https://github.com/cburgmer/rasterizeHTML.js">rasterizeHTML</a></p>
170+
</div>
171+
172+
173+
174+
175+
176+
177+
178+
179+
180+
181+
<h4 class="name" id="autoPrint"><span class="type-signature"></span>autoPrint<span class="type-signature"></span></h4>
182+
183+
184+
185+
186+
187+
<dl class="details">
188+
189+
190+
<dt class="tag-source">Source:</dt>
191+
<dd class="tag-source"><ul class="dummy"><li>
192+
<a href="plugins_autoprint.js.html">plugins/autoprint.js</a>, <a href="plugins_autoprint.js.html#line8">line 8</a>
193+
</li></ul></dd>
194+
195+
196+
197+
198+
199+
200+
201+
202+
203+
204+
205+
206+
207+
208+
209+
210+
211+
212+
213+
214+
215+
216+
217+
218+
219+
220+
221+
222+
223+
224+
225+
</dl>
226+
227+
228+
229+
230+
231+
<div class="description">
232+
<p>Makes the PDF automatically print. This works in Chrome, Firefox, Acrobat
233+
Reader.</p>
234+
</div>
235+
236+
237+
238+
239+
240+
241+
242+
<h5>Example</h5>
243+
244+
<pre class="prettyprint"><code>var doc = new jsPDF()
245+
doc.text(10, 10, 'This is a test')
246+
doc.autoPrint()
247+
doc.save('autoprint.pdf')</code></pre>
248+
249+
250+
251+
252+
113253
<h4 class="name" id="CapJoinStyles"><span class="type-signature"></span>CapJoinStyles<span class="type-signature"></span></h4>
114254

115255

@@ -1537,7 +1677,7 @@ <h4 class="name" id="lstext"><span class="type-signature"></span>lstext<span cla
15371677

15381678

15391679

1540-
<dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>We'll be removing this function. It doesn't take character width into account.</li></ul></dd>
1680+
<dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li><p>We'll be removing this function. It doesn't take character width into account.</p></li></ul></dd>
15411681

15421682

15431683

@@ -4309,9 +4449,9 @@ <h5>Example</h5>
43094449
<pre class="prettyprint"><code>doc = jsPDF()
43104450
doc.addPage()
43114451
doc.addPage()
4312-
doc.text('I am on page 3')
4452+
doc.text('I am on page 3', 10, 10)
43134453
doc.setPage(1)
4314-
doc.text('I am on page 1')</code></pre>
4454+
doc.text('I am on page 1', 10, 10)</code></pre>
43154455

43164456

43174457

@@ -5277,7 +5417,7 @@ <h5>Returns:</h5>
52775417
<br class="clear">
52785418

52795419
<footer>
5280-
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.2</a> on Sat Oct 08 2016 22:04:02 GMT+0100 (BST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
5420+
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.2</a> on Sun Oct 09 2016 11:08:27 GMT+0100 (BST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
52815421
</footer>
52825422

52835423
<script>prettyPrint();</script>

‎docs/index.html‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<label for="nav-trigger" class="overlay"></label>
2323

2424
<nav>
25-
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="jsPDF.html">jsPDF</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addFont">addFont</a></li><li><a href="global.html#addMetadata">addMetadata</a></li><li><a href="global.html#addPage">addPage</a></li><li><a href="global.html#CapJoinStyles">CapJoinStyles</a></li><li><a href="global.html#circle">circle</a></li><li><a href="global.html#ellipse">ellipse</a></li><li><a href="global.html#getFontList">getFontList</a></li><li><a href="global.html#lines">lines</a></li><li><a href="global.html#lstext">lstext</a></li><li><a href="global.html#output">output</a></li><li><a href="global.html#rect">rect</a></li><li><a href="global.html#roundedRect">roundedRect</a></li><li><a href="global.html#save">save</a></li><li><a href="global.html#setDisplayMode">setDisplayMode</a></li><li><a href="global.html#setDrawColor">setDrawColor</a></li><li><a href="global.html#setFillColor">setFillColor</a></li><li><a href="global.html#setFont">setFont</a></li><li><a href="global.html#setFontSize">setFontSize</a></li><li><a href="global.html#setFontStyle">setFontStyle</a></li><li><a href="global.html#setLineCap">setLineCap</a></li><li><a href="global.html#setLineJoin">setLineJoin</a></li><li><a href="global.html#setLineWidth">setLineWidth</a></li><li><a href="global.html#setPage">setPage</a></li><li><a href="global.html#setProperties">setProperties</a></li><li><a href="global.html#setTextColor">setTextColor</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#triangle">triangle</a></li></ul>
25+
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="jsPDF.html">jsPDF</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addFont">addFont</a></li><li><a href="global.html#addHTML">addHTML</a></li><li><a href="global.html#addMetadata">addMetadata</a></li><li><a href="global.html#addPage">addPage</a></li><li><a href="global.html#autoPrint">autoPrint</a></li><li><a href="global.html#CapJoinStyles">CapJoinStyles</a></li><li><a href="global.html#circle">circle</a></li><li><a href="global.html#ellipse">ellipse</a></li><li><a href="global.html#getFontList">getFontList</a></li><li><a href="global.html#lines">lines</a></li><li><a href="global.html#lstext">lstext</a></li><li><a href="global.html#output">output</a></li><li><a href="global.html#rect">rect</a></li><li><a href="global.html#roundedRect">roundedRect</a></li><li><a href="global.html#save">save</a></li><li><a href="global.html#setDisplayMode">setDisplayMode</a></li><li><a href="global.html#setDrawColor">setDrawColor</a></li><li><a href="global.html#setFillColor">setFillColor</a></li><li><a href="global.html#setFont">setFont</a></li><li><a href="global.html#setFontSize">setFontSize</a></li><li><a href="global.html#setFontStyle">setFontStyle</a></li><li><a href="global.html#setLineCap">setLineCap</a></li><li><a href="global.html#setLineJoin">setLineJoin</a></li><li><a href="global.html#setLineWidth">setLineWidth</a></li><li><a href="global.html#setPage">setPage</a></li><li><a href="global.html#setProperties">setProperties</a></li><li><a href="global.html#setTextColor">setTextColor</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#triangle">triangle</a></li></ul>
2626
</nav>
2727

2828
<div id="main">
@@ -50,10 +50,22 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="jsPDF.htm
5050
<p><a href="https://codeclimate.com/repos/57f943855cdc43705e00592f/feed"><img src="https://codeclimate.com/repos/57f943855cdc43705e00592f/badges/2665cddeba042dc5191f/gpa.svg" alt="Code Climate"></a> <a href="https://codeclimate.com/repos/57f943855cdc43705e00592f/coverage"><img src="https://codeclimate.com/repos/57f943855cdc43705e00592f/badges/2665cddeba042dc5191f/coverage.svg" alt="Test Coverage"></a></p>
5151
<p><strong>A library to generate PDFs in client-side JavaScript.</strong></p>
5252
<p>You can <a href="http://twitter.com/MrRio">catch me on twitter</a>: <a href="http://twitter.com/MrRio">@MrRio</a> or head over to <a href="http://parall.ax">my company's website</a> for consultancy.</p>
53-
<h2>Creating your first document</h2><p>See examples/basic.html. There's a live editor example at index.html.</p>
54-
<pre class="prettyprint source lang-javascript"><code>var doc = new jsPDF();
55-
doc.text(20, 20, 'Hello world.');
56-
doc.save('Test.pdf');</code></pre><p><strong>Head over to <a href="http://jspdf.com">jsPDF.com</a> for details or <a href="http://mrrio.github.io/jsPDF/"><em>here</em></a> for our most recent live editor and examples.</strong></p>
53+
<h2><a href="http://rawgit.com/MrRio/jsPDF/master/">Live Demo</a> | <a href="http://rawgit.com/MrRio/jsPDF/master/docs/">Documentation</a></h2><h2>Creating your first document</h2><p>The easiest way to get started is to drop the CDN hosted library into your page:</p>
54+
<pre class="prettyprint source lang-html"><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js&quot;>&lt;/script></code></pre><p>Then you're ready to start making your document:</p>
55+
<pre class="prettyprint source lang-javascript"><code>// Default export is a4 paper, portrait, using milimeters for units
56+
var doc = new jsPDF()
57+
58+
doc.text('Hello world!', 10, 10)
59+
doc.save('a4.pdf')</code></pre><p>If you want to change the paper size, orientation, or units, you can do:</p>
60+
<pre class="prettyprint source lang-javascript"><code>// Landscape export, 2×4 inches
61+
var doc = new jsPDF({
62+
orientation: 'landscape',
63+
unit: 'in',
64+
format: [4, 2]
65+
})
66+
67+
doc.text('Hello world!', 10, 10)
68+
doc.save('two-by-four.pdf')</code></pre><p>Great! Now give us a Star :)</p>
5769
<h2>Contributing</h2><p>Build the library with <code>npm run build</code>. This will fetch all dependencies and then compile the <code>dist</code> files. To see the examples locally you can start a web server with <code>npm start</code> and go to <code>localhost:8000</code>.</p>
5870
<h2>Credits</h2><ul>
5971
<li>Big thanks to Daniel Dotsenko from <a href="http://willow-systems.com">Willow Systems Corporation</a> for making huge contributions to the codebase.</li>
@@ -89,7 +101,7 @@ <h2>License (MIT)</h2><p>Copyright (c) 2010-2016 James Hall, https://github.com/
89101
<br class="clear">
90102

91103
<footer>
92-
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.2</a> on Sat Oct 08 2016 22:04:02 GMT+0100 (BST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
104+
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.2</a> on Sun Oct 09 2016 11:08:27 GMT+0100 (BST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
93105
</footer>
94106

95107
<script>prettyPrint();</script>

‎docs/jsPDF.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<label for="nav-trigger" class="overlay"></label>
2323

2424
<nav>
25-
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="jsPDF.html">jsPDF</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addFont">addFont</a></li><li><a href="global.html#addMetadata">addMetadata</a></li><li><a href="global.html#addPage">addPage</a></li><li><a href="global.html#CapJoinStyles">CapJoinStyles</a></li><li><a href="global.html#circle">circle</a></li><li><a href="global.html#ellipse">ellipse</a></li><li><a href="global.html#getFontList">getFontList</a></li><li><a href="global.html#lines">lines</a></li><li><a href="global.html#lstext">lstext</a></li><li><a href="global.html#output">output</a></li><li><a href="global.html#rect">rect</a></li><li><a href="global.html#roundedRect">roundedRect</a></li><li><a href="global.html#save">save</a></li><li><a href="global.html#setDisplayMode">setDisplayMode</a></li><li><a href="global.html#setDrawColor">setDrawColor</a></li><li><a href="global.html#setFillColor">setFillColor</a></li><li><a href="global.html#setFont">setFont</a></li><li><a href="global.html#setFontSize">setFontSize</a></li><li><a href="global.html#setFontStyle">setFontStyle</a></li><li><a href="global.html#setLineCap">setLineCap</a></li><li><a href="global.html#setLineJoin">setLineJoin</a></li><li><a href="global.html#setLineWidth">setLineWidth</a></li><li><a href="global.html#setPage">setPage</a></li><li><a href="global.html#setProperties">setProperties</a></li><li><a href="global.html#setTextColor">setTextColor</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#triangle">triangle</a></li></ul>
25+
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="jsPDF.html">jsPDF</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addFont">addFont</a></li><li><a href="global.html#addHTML">addHTML</a></li><li><a href="global.html#addMetadata">addMetadata</a></li><li><a href="global.html#addPage">addPage</a></li><li><a href="global.html#autoPrint">autoPrint</a></li><li><a href="global.html#CapJoinStyles">CapJoinStyles</a></li><li><a href="global.html#circle">circle</a></li><li><a href="global.html#ellipse">ellipse</a></li><li><a href="global.html#getFontList">getFontList</a></li><li><a href="global.html#lines">lines</a></li><li><a href="global.html#lstext">lstext</a></li><li><a href="global.html#output">output</a></li><li><a href="global.html#rect">rect</a></li><li><a href="global.html#roundedRect">roundedRect</a></li><li><a href="global.html#save">save</a></li><li><a href="global.html#setDisplayMode">setDisplayMode</a></li><li><a href="global.html#setDrawColor">setDrawColor</a></li><li><a href="global.html#setFillColor">setFillColor</a></li><li><a href="global.html#setFont">setFont</a></li><li><a href="global.html#setFontSize">setFontSize</a></li><li><a href="global.html#setFontStyle">setFontStyle</a></li><li><a href="global.html#setLineCap">setLineCap</a></li><li><a href="global.html#setLineJoin">setLineJoin</a></li><li><a href="global.html#setLineWidth">setLineWidth</a></li><li><a href="global.html#setPage">setPage</a></li><li><a href="global.html#setProperties">setProperties</a></li><li><a href="global.html#setTextColor">setTextColor</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#triangle">triangle</a></li></ul>
2626
</nav>
2727

2828
<div id="main">
@@ -349,7 +349,7 @@ <h5>Example</h5>
349349
<br class="clear">
350350

351351
<footer>
352-
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.2</a> on Sat Oct 08 2016 22:04:02 GMT+0100 (BST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
352+
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.2</a> on Sun Oct 09 2016 11:08:27 GMT+0100 (BST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
353353
</footer>
354354

355355
<script>prettyPrint();</script>

0 commit comments

Comments
 (0)