basic.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. function demoTwoPageDocument() {
  2. var doc = new jsPDF();
  3. doc.text(20, 20, 'Hello world!');
  4. doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  5. doc.addPage();
  6. doc.text(20, 20, 'Do you like that?');
  7. // Save the PDF
  8. doc.save('Test.pdf');
  9. }
  10. function demoLandscape() {
  11. var doc = new jsPDF('landscape');
  12. doc.text(20, 20, 'Hello landscape world!');
  13. // Save the PDF
  14. doc.save('Test.pdf');
  15. }
  16. function demoFontSizes() {
  17. var doc = new jsPDF();
  18. doc.setFontSize(22);
  19. doc.text(20, 20, 'This is a title');
  20. doc.setFontSize(16);
  21. doc.text(20, 30, 'This is some normal sized text underneath.');
  22. doc.save('Test.pdf');
  23. }
  24. function demoFontTypes() {
  25. var doc = new jsPDF();
  26. doc.text(20, 20, 'This is the default font.');
  27. doc.setFont("courier");
  28. doc.setFontType("normal");
  29. doc.text(20, 30, 'This is courier normal.');
  30. doc.setFont("times");
  31. doc.setFontType("italic");
  32. doc.text(20, 40, 'This is times italic.');
  33. doc.setFont("helvetica");
  34. doc.setFontType("bold");
  35. doc.text(20, 50, 'This is helvetica bold.');
  36. doc.setFont("courier");
  37. doc.setFontType("bolditalic");
  38. doc.text(20, 60, 'This is courier bolditalic.');
  39. doc.save('Test.pdf');
  40. }
  41. function demoTextColors() {
  42. var doc = new jsPDF();
  43. doc.setTextColor(100);
  44. doc.text(20, 20, 'This is gray.');
  45. doc.setTextColor(150);
  46. doc.text(20, 30, 'This is light gray.');
  47. doc.setTextColor(255,0,0);
  48. doc.text(20, 40, 'This is red.');
  49. doc.setTextColor(0,255,0);
  50. doc.text(20, 50, 'This is green.');
  51. doc.setTextColor(0,0,255);
  52. doc.text(20, 60, 'This is blue.');
  53. // Output as Data URI
  54. doc.output('datauri');
  55. }
  56. function demoMetadata() {
  57. var doc = new jsPDF();
  58. doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
  59. // Optional - set properties on the document
  60. doc.setProperties({
  61. title: 'Title',
  62. subject: 'This is the subject',
  63. author: 'James Hall',
  64. keywords: 'generated, javascript, web 2.0, ajax',
  65. creator: 'MEEE'
  66. });
  67. doc.save('Test.pdf');
  68. }
  69. function demoUserInput() {
  70. var name = prompt('What is your name?');
  71. var multiplier = prompt('Enter a number:');
  72. multiplier = parseInt(multiplier);
  73. var doc = new jsPDF();
  74. doc.setFontSize(22);
  75. doc.text(20, 20, 'Questions');
  76. doc.setFontSize(16);
  77. doc.text(20, 30, 'This belongs to: ' + name);
  78. for(var i = 1; i <= 12; i ++) {
  79. doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
  80. }
  81. doc.addPage();
  82. doc.setFontSize(22);
  83. doc.text(20, 20, 'Answers');
  84. doc.setFontSize(16);
  85. for (i = 1; i <= 12; i ++) {
  86. doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
  87. }
  88. doc.save('Test.pdf');
  89. }
  90. function demoRectangles() {
  91. var doc = new jsPDF();
  92. doc.rect(20, 20, 10, 10); // empty square
  93. doc.rect(40, 20, 10, 10, 'F'); // filled square
  94. doc.setDrawColor(255, 0, 0);
  95. doc.rect(60, 20, 10, 10); // empty red square
  96. doc.setDrawColor(255, 0, 0);
  97. doc.rect(80, 20, 10, 10, 'FD'); // filled square with red borders
  98. doc.setDrawColor(0);
  99. doc.setFillColor(255, 0, 0);
  100. doc.rect(100, 20, 10, 10, 'F'); // filled red square
  101. doc.setDrawColor(0);
  102. doc.setFillColor(255, 0, 0);
  103. doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black borders
  104. doc.setDrawColor(0);
  105. doc.setFillColor(255, 255, 255);
  106. doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); // Black square with rounded corners
  107. doc.save('Test.pdf');
  108. }
  109. function demoLines() {
  110. var doc = new jsPDF();
  111. doc.line(20, 20, 60, 20); // horizontal line
  112. doc.setLineWidth(0.5);
  113. doc.line(20, 25, 60, 25);
  114. doc.setLineWidth(1);
  115. doc.line(20, 30, 60, 30);
  116. doc.setLineWidth(1.5);
  117. doc.line(20, 35, 60, 35);
  118. doc.setDrawColor(255,0,0); // draw red lines
  119. doc.setLineWidth(0.1);
  120. doc.line(100, 20, 100, 60); // vertical line
  121. doc.setLineWidth(0.5);
  122. doc.line(105, 20, 105, 60);
  123. doc.setLineWidth(1);
  124. doc.line(110, 20, 110, 60);
  125. doc.setLineWidth(1.5);
  126. doc.line(115, 20, 115, 60);
  127. // Output as Data URI
  128. doc.output('datauri');
  129. }
  130. function demoCircles() {
  131. var doc = new jsPDF();
  132. doc.ellipse(40, 20, 10, 5);
  133. doc.setFillColor(0,0,255);
  134. doc.ellipse(80, 20, 10, 5, 'F');
  135. doc.setLineWidth(1);
  136. doc.setDrawColor(0);
  137. doc.setFillColor(255,0,0);
  138. doc.circle(120, 20, 5, 'FD');
  139. doc.save('Test.pdf');
  140. }
  141. function demoTriangles() {
  142. var doc = new jsPDF();
  143. doc.triangle(60, 100, 60, 120, 80, 110, 'FD');
  144. doc.setLineWidth(1);
  145. doc.setDrawColor(255,0,0);
  146. doc.setFillColor(0,0,255);
  147. doc.triangle(100, 100, 110, 100, 120, 130, 'FD');
  148. doc.save('Test.pdf');
  149. }
  150. function demoImages() {
  151. // Because of security restrictions, getImageFromUrl will
  152. // not load images from other domains. Chrome has added
  153. // security restrictions that prevent it from loading images
  154. // when running local files. Run with: chromium --allow-file-access-from-files --allow-file-access
  155. // to temporarily get around this issue.
  156. var getImageFromUrl = function(url, callback) {
  157. var img = new Image(), data, ret = {
  158. data: null,
  159. pending: true
  160. };
  161. img.onError = function() {
  162. throw new Error('Cannot load image: "'+url+'"');
  163. };
  164. img.onload = function() {
  165. var canvas = document.createElement('canvas');
  166. document.body.appendChild(canvas);
  167. canvas.width = img.width;
  168. canvas.height = img.height;
  169. var ctx = canvas.getContext('2d');
  170. ctx.drawImage(img, 0, 0);
  171. // Grab the image as a jpeg encoded in base64, but only the data
  172. data = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
  173. // Convert the data to binary form
  174. data = atob(data);
  175. document.body.removeChild(canvas);
  176. ret['data'] = data;
  177. ret['pending'] = false;
  178. if (typeof callback === 'function') {
  179. callback(data);
  180. }
  181. };
  182. img.src = url;
  183. return ret;
  184. };
  185. // Since images are loaded asyncronously, we must wait to create
  186. // the pdf until we actually have the image data.
  187. // If we already had the jpeg image binary data loaded into
  188. // a string, we create the pdf without delay.
  189. var createPDF = function(imgData) {
  190. var doc = new jsPDF();
  191. doc.addImage(imgData, 'JPEG', 10, 10, 50, 50);
  192. doc.addImage(imgData, 'JPEG', 70, 10, 100, 120);
  193. doc.save('output.pdf');
  194. }
  195. getImageFromUrl('thinking-monkey.jpg', createPDF);
  196. }
  197. function demoStringSplitting() {
  198. var pdf = new jsPDF('p','in','letter')
  199. , sizes = [12, 16, 20]
  200. , fonts = [['Times','Roman'],['Helvetica',''], ['Times','Italic']]
  201. , font, size, lines
  202. , margin = 0.5 // inches on a 8.5 x 11 inch sheet.
  203. , verticalOffset = margin
  204. , loremipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id eros turpis. Vivamus tempor urna vitae sapien mollis molestie. Vestibulum in lectus non enim bibendum laoreet at at libero. Etiam malesuada erat sed sem blandit in varius orci porttitor. Sed at sapien urna. Fusce augue ipsum, molestie et adipiscing at, varius quis enim. Morbi sed magna est, vel vestibulum urna. Sed tempor ipsum vel mi pretium at elementum urna tempor. Nulla faucibus consectetur felis, elementum venenatis mi mollis gravida. Aliquam mi ante, accumsan eu tempus vitae, viverra quis justo.\n\nProin feugiat augue in augue rhoncus eu cursus tellus laoreet. Pellentesque eu sapien at diam porttitor venenatis nec vitae velit. Donec ultrices volutpat lectus eget vehicula. Nam eu erat mi, in pulvinar eros. Mauris viverra porta orci, et vehicula lectus sagittis id. Nullam at magna vitae nunc fringilla posuere. Duis volutpat malesuada ornare. Nulla in eros metus. Vivamus a posuere libero.'
  205. // Margins:
  206. pdf.setDrawColor(0, 255, 0)
  207. .setLineWidth(1/72)
  208. .line(margin, margin, margin, 11 - margin)
  209. .line(8.5 - margin, margin, 8.5-margin, 11-margin)
  210. // the 3 blocks of text
  211. for (var i in fonts){
  212. if (fonts.hasOwnProperty(i)) {
  213. font = fonts[i]
  214. size = sizes[i]
  215. lines = pdf.setFont(font[0], font[1])
  216. .setFontSize(size)
  217. .splitTextToSize(loremipsum, 7.5)
  218. // Don't want to preset font, size to calculate the lines?
  219. // .splitTextToSize(text, maxsize, options)
  220. // allows you to pass an object with any of the following:
  221. // {
  222. // 'fontSize': 12
  223. // , 'fontStyle': 'Italic'
  224. // , 'fontName': 'Times'
  225. // }
  226. // Without these, .splitTextToSize will use current / default
  227. // font Family, Style, Size.
  228. console.log(lines);
  229. pdf.text(0.5, verticalOffset + size / 72, lines)
  230. verticalOffset += (lines.length + 0.5) * size / 72
  231. }
  232. }
  233. pdf.save('Test.pdf');
  234. }
  235. function demoFromHTML() {
  236. var pdf = new jsPDF('p', 'pt', 'letter')
  237. // source can be HTML-formatted string, or a reference
  238. // to an actual DOM element from which the text will be scraped.
  239. , source = $('#fromHTMLtestdiv')[0]
  240. // we support special element handlers. Register them with jQuery-style
  241. // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
  242. // There is no support for any other type of selectors
  243. // (class, of compound) at this time.
  244. , specialElementHandlers = {
  245. // element with id of "bypass" - jQuery style selector
  246. '#bypassme': function(element, renderer){
  247. // true = "handled elsewhere, bypass text extraction"
  248. return true
  249. }
  250. }
  251. margins = {
  252. top: 80,
  253. bottom: 60,
  254. left: 40,
  255. width: 522
  256. };
  257. // all coords and widths are in jsPDF instance's declared units
  258. // 'inches' in this case
  259. pdf.fromHTML(
  260. source // HTML string or DOM elem ref.
  261. , margins.left // x coord
  262. , margins.top // y coord
  263. , {
  264. 'width': margins.width // max width of content on PDF
  265. , 'elementHandlers': specialElementHandlers
  266. },
  267. function (dispose) {
  268. // dispose: object with X, Y of the last line add to the PDF
  269. // this allow the insertion of new lines after html
  270. pdf.save('Test.pdf');
  271. },
  272. margins
  273. )
  274. }
  275. function demoTextAlign() {
  276. var pdf = new jsPDF('p', 'pt', 'letter');
  277. pdf.setFillColor(0);
  278. pdf.circle( 140, 50, 2, "F" );
  279. pdf.text( 'This text is normally\raligned.', 140, 50 );
  280. pdf.circle( 140, 120, 2, "F" );
  281. pdf.text( 'This text is centered\raround\rthis point.', 140, 120, 'center' );
  282. pdf.circle( 140, 300, 2, "F" );
  283. pdf.text( 'This text is rotated\rand centered around\rthis point.', 140, 300, 45, 'center' );
  284. pdf.circle( 140, 400, 2, "F" );
  285. pdf.text( 'This text is\raligned to the\rright.', 140, 400, 'right' );
  286. pdf.circle( 140, 550, 2, "F" );
  287. pdf.text( 'This text is\raligned to the\rright.', 140, 550, 45, 'right' );
  288. pdf.circle( 460, 50, 2, "F" );
  289. pdf.text( 'This single line is centered', 460, 50, 'center' );
  290. pdf.circle( 460, 200, 2, "F" );
  291. pdf.text( 'This right aligned text\r\rhas an empty line.', 460, 200, 'right' );
  292. pdf.save('Test.pdf');
  293. }