Blame | Letzte Änderung | Log anzeigen | RSS feed
<!doctype><html><head><title>jsPDF</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css"><link rel="stylesheet" type="text/css" href="css/main.css"><script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script><script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script><script type="text/javascript" src="../jspdf.js"></script><script type="text/javascript" src="../libs/Deflate/adler32cs.js"></script><script type="text/javascript" src="../libs/FileSaver.js/FileSaver.js"></script><script type="text/javascript" src="../libs/Blob.js/BlobBuilder.js"></script><script type="text/javascript" src="../jspdf.plugin.addimage.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>$(function() {$("#accordion-basic, #accordion-text, #accordion-graphic").accordion({autoHeight: false,navigation: true});$( "#tabs" ).tabs();$(".button").button();});</script></head><body><a href="https://github.com/MrRio/jsPDF"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a><h1>jsPDF Demos</h1><p>Examples for using jsPDF with Data URIs below. Go <a href="https://github.com/MrRio/jsPDF">back to project homepage</a>.</p><div id="tabs"><ul><li><a href="#tabs-basic">Basic elements</a></li><li><a href="#tabs-text">Text elements</a></li><li><a href="#tabs-graphic">Graphic elements</a></li></ul><div id="tabs-basic"><div id="accordion-basic"><h2><a href="#">Simple two-page text document</a></h2><div><p><pre>var doc = new jsPDF();doc.text(20, 20, 'Hello world!');doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');doc.addPage();doc.text(20, 20, 'Do you like that?');doc.save('Test.pdf');</pre><a href="javascript:demoTwoPageDocument()" class="button">Run Code</a></p></div><h2><a href="#">Landscape document</a></h2><div><p><pre>var doc = new jsPDF('landscape');doc.text(20, 20, 'Hello landscape world!');doc.save('Test.pdf');</pre><a href="javascript:demoLandscape()" class="button">Run Code</a></p></div><h2><a href="#">Adding metadata</a></h2><div><p><pre>var doc = new jsPDF();doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');// Optional - set properties on the documentdoc.setProperties({title: 'Title',subject: 'This is the subject',author: 'James Hall',keywords: 'generated, javascript, web 2.0, ajax',creator: 'MEEE'});// Output as Data URIdoc.save('Test.pdf');</pre><a href="javascript:demoMetadata()" class="button">Run Code</a></p></div><h2><a href="#">Example of user input</a></h2><div><p><pre>var name = prompt('What is your name?');var multiplier = prompt('Enter a number:');multiplier = parseInt(multiplier);var doc = new jsPDF();doc.setFontSize(22);doc.text(20, 20, 'Questions');doc.setFontSize(16);doc.text(20, 30, 'This belongs to: ' + name);for(var i = 1; i <= 12; i ++) {doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');}doc.addPage();doc.setFontSize(22);doc.text(20, 20, 'Answers');doc.setFontSize(16);for(var i = 1; i <= 12; i ++) {doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));}doc.save('Test.pdf');</pre><a href="javascript:demoUserInput()" class="button">Run Code</a></p></div></div></div><div id="tabs-text"><div id="accordion-text"><h2><a href="#">Different font sizes</a></h2><div><p><pre>var doc = new jsPDF();doc.setFontSize(22);doc.text(20, 20, 'This is a title');doc.setFontSize(16);doc.text(20, 30, 'This is some normal sized text underneath.');doc.save('Test.pdf');</pre><a href="javascript:demoFontSizes()" class="button">Run Code</a></p></div><h2><a href="#">Different font types</a></h2><div><p><pre>var doc = new jsPDF();doc.text(20, 20, 'This is the default font.');doc.setFont("courier");doc.text(20, 30, 'This is courier normal.');doc.setFont("times");doc.setFontType("italic");doc.text(20, 40, 'This is times italic.');doc.setFont("helvetica");doc.setFontType("bold");doc.text(20, 50, 'This is helvetica bold.');doc.setFont("courier");doc.setFontType("bolditalic");doc.text(20, 60, 'This is courier bolditalic.');doc.save('Test.pdf');</pre><a href="javascript:demoFontTypes()" class="button">Run Code</a></p></div><h2><a href="#">Different text colors</a></h2><div><p><pre>var doc = new jsPDF();doc.setTextColor(100);doc.text(20, 20, 'This is gray.');doc.setTextColor(150);doc.text(20, 30, 'This is light gray.');doc.setTextColor(255,0,0);doc.text(20, 40, 'This is red.');doc.setTextColor(0,255,0);doc.text(20, 50, 'This is green.');doc.setTextColor(0,0,255);doc.text(20, 60, 'This is blue.');doc.save('Test.pdf');</pre><a href="javascript:demoTextColors()" class="button">Run Code</a></p></div><h2><a href="#">Font-metrics-based line sizing and split</a></h2><div><p><pre>var pdf = new jsPDF('p','in','letter'), sizes = [12, 16, 20], fonts = [['Times','Roman'],['Helvetica',''], ['Times','Italic']], font, size, lines, verticalOffset = 0.5 // inches on a 8.5 x 11 inch sheet., loremipsum = 'Lorem ipsum dolor sit amet, ...'for (var i in fonts){if (fonts.hasOwnProperty(i)) {font = fonts[i]size = sizes[i]lines = pdf.setFont(font[0], font[1]).setFontSize(size).splitTextToSize(loremipsum, 7.5)// Don't want to preset font, size to calculate the lines?// .splitTextToSize(text, maxsize, options)// allows you to pass an object with any of the following:// {// 'fontSize': 12// , 'fontStyle': 'Italic'// , 'fontName': 'Times'// }// Without these, .splitTextToSize will use current / default// font Family, Style, Size.pdf.text(0.5, verticalOffset + size / 72, lines)verticalOffset += (lines.length + 0.5) * size / 72}}pdf.save('Test.pdf');</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 withcarriage 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 casepdf.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.save('Test.pdf');</pre><a href="javascript:demoFromHTML()" class="button">Run Code</a></p></div></div></div></div><div id="tabs-graphic"><div id="accordion-graphic"><h2><a href="#">Draw example: rectangles / squares</a></h2><div><p><pre>var doc = new jsPDF();doc.rect(20, 20, 10, 10); // empty squaredoc.rect(40, 20, 10, 10, 'F'); // filled squaredoc.setDrawColor(255,0,0);doc.rect(60, 20, 10, 10); // empty red squaredoc.setDrawColor(255,0,0);doc.rect(80, 20, 10, 10, 'FD'); // filled square with red bordersdoc.setDrawColor(0);doc.setFillColor(255,0,0);doc.rect(100, 20, 10, 10, 'F'); // filled red squaredoc.setDrawColor(0);doc.setFillColor(255,0,0);doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black bordersdoc.setDrawColor(0);doc.setFillColor(255, 255, 255);doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); // Black sqaure with rounded cornersdoc.save('Test.pdf');</pre><a href="javascript:demoRectangles()" class="button">Run Code</a></p></div><h2><a href="#">Draw example: lines</a></h2><div><p><pre>var doc = new jsPDF();doc.line(20, 20, 60, 20); // horizontal linedoc.setLineWidth(0.5);doc.line(20, 25, 60, 25);doc.setLineWidth(1);doc.line(20, 30, 60, 30);doc.setLineWidth(1.5);doc.line(20, 35, 60, 35);doc.setDrawColor(255,0,0); // draw red linesdoc.setLineWidth(0.1);doc.line(100, 20, 100, 60); // vertical linedoc.setLineWidth(0.5);doc.line(105, 20, 105, 60);doc.setLineWidth(1);doc.line(110, 20, 110, 60);doc.setLineWidth(1.5);doc.line(115, 20, 115, 60);doc.save('Test.pdf');</pre><a href="javascript:demoLines()" class="button">Run Code</a></p></div><h2><a href="#">Draw example: circles and ellipses</a></h2><div><p><pre>var doc = new jsPDF();doc.ellipse(40, 20, 10, 5);doc.setFillColor(0,0,255);doc.ellipse(80, 20, 10, 5, 'F');doc.setLineWidth(1);doc.setDrawColor(0);doc.setFillColor(255,0,0);doc.circle(120, 20, 5, 'FD');doc.save('Test.pdf');</pre><a href="javascript:demoCircles()" class="button">Run Code</a></p></div><h2><a href="#">Draw example: triangles</a></h2><div><p><pre>var doc = new jsPDF();doc.triangle(60, 100, 60, 120, 80, 110, 'FD');doc.setLineWidth(1);doc.setDrawColor(255,0,0);doc.setFillColor(0,0,255);doc.triangle(100, 100, 110, 100, 120, 130, 'FD');doc.save('My file.pdf');</pre><a href="javascript:demoTriangles()" class="button">Run Code</a></p></div><h2><a href="#">Draw example: Images</a></h2><div><p><pre>// Because of security restrictions, getImageFromUrl will// not load images from other domains. Chrome has added// security restrictions that prevent it from loading images// when running local files. Run with: chromium --allow-file-access-from-files --allow-file-access// to temporarily get around this issue.var getImageFromUrl = function(url, callback) {var img = new Image, data, ret={data: null, pending: true};img.onError = function() {throw new Error('Cannot load image: "'+url+'"');}img.onload = function() {var canvas = document.createElement('canvas');document.body.appendChild(canvas);canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0);// Grab the image as a jpeg encoded in base64, but only the datadata = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);// Convert the data to binary formdata = atob(data)document.body.removeChild(canvas);ret['data'] = data;ret['pending'] = false;if (typeof callback === 'function') {callback(data);}}img.src = url;return ret;}// Since images are loaded asyncronously, we must wait to create// the pdf until we actually have the image data.// If we already had the jpeg image binary data loaded into// a string, we create the pdf without delay.var createPDF = function(imgData) {var doc = new jsPDF();doc.addImage(imgData, 'JPEG', 10, 10, 50, 50);doc.addImage(imgData, 'JPEG', 70, 10, 100, 120);// Output as Data URIdoc.output('datauri');}getImageFromUrl('thinking-monkey.jpg', createPDF);</pre><a href="javascript:demoImages()" class="button">Run Code</a></p></div></div></div></div></div></body></html>