JavaScript PDF Creator is a client library to generate PDFs in pure JavaScript. JavaScript PDF Creator is a leading HTML5 client solution for generating PDFs, used for event tickets, reports, certificates.

[Live Demo] https://veryutils.com/demo/jspdf/
[Documentation] https://veryutils.com/demo/jspdf/docs/

With JavaScript PDF Creator Library, you can create PDF files easily from your web page. In order to use this JavaScript library, you need to include js file, create an object and call its methods precisely defining what and how to render, for example:

[head]
[script src="https://veryutils.com/demo/jspdf/dist/jspdf.min.js"][/script]
[/head]

Then you're ready to start making your document:

//JavaScript
//Default export is a4 paper, portrait, using millimeters for units
var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

If you want to change the paper size, orientation, or units, you can do:

//JavaScript
//Landscape export, 2×4 inches
var doc = new jsPDF({orientation: 'landscape', unit: 'in', format: [4, 2]})
doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

The JavaScript PDF Creator library APIs

Creating a document

First let us discuss how to create a new document. It's as simple as executing this code.

var doc = new jsPDF(orientation, unit, format, compress);

The constructor can take several parameters.
• orientation - The default value for orientation is "portrait". We can set it to "landscape" if we want a different page orientation.
• unit - We can tell jsPDF in which units we want to work. Use one of the following: "pt" (points), "mm" (default), "cm", "in".
• format - It's default page format. It can be "a3", "a4" (default), "a5", "letter", "legal".

We can add new page using the following code.

doc.addPage(width, height);

As parameters we pass the page, width and height in the units defined in the document constructor. Adding pages moves us to this page, so any operation will be executed on that page. If we want to go to another page we can use the setPage function.

doc.setPage(pageNumber);

You can also get actual page numbers by using this code.

doc.internal.getNumberOfPages();

The first example in the sample application demonstrates the usage of the functions described above. You can run the application to check it out and investigate the application's code that is attached to the article.

Working with text

First, the most important thing is displaying text, we do it using the doc.text function which takes 3 parameters. The first two are X and Y positions of the text in units defined in the document constructor. Notice that the Y position, is the position of the text baseline, so printing something with the Y position set to 0 will actually print it over the top edge of the document. The third argument is the text to be displayed.

doc.text(10, 10, "Hello world!");

The second thing is the font name used to draw the text. We can choose one of the following: courier, helvetica, time. We change the font family and font style by running the doc.setFont function.

doc.setFont("courier", "italic");

By executing the doc.getFontList function we can find out what fonts are available and what font styles we can set for given font.

doc.getFontList();

/*
{
"helvetica": ["normal", "bold", "italic", "bolditalic"],
"Helvetica": ["", "Bold", "Oblique", "BoldOblique"],
"courier": ["normal", "bold", "italic", "bolditalic"],
"Courier": ["", "Bold", "Oblique", "BoldOblique"],
"times": ["normal", "bold", "italic", "bolditalic"],
"Times": ["Roman", "Bold", "Italic", "BoldItalic"]
}
*/

We can also change font styles individually thanks to the doc.setFontStyle or the doc.setFontType function, which is the alias to the first one.

doc.setFontType("bolditalic");

// is the same as calling
doc.setFontStyle("bolditalic");

Next thing is the font size. It's as simple as calling the doc.setFontSize function.

doc.setFontSize(40);

The last thing is the text color. We change text color using the doc.setTextColor function and passing three parameters which are RGB (Red, Green, Blue) color values.

doc.setTextColor(255, 0, 0);

The sample document showing different ways of displaying text is located under Example 2 in the sample application attached to the article.

Working with images

The only function for images is the doc.addImage. It takes image as a first parameter, image format/type as a second and X, Y positions of the image as a third and fourth arguments. We can also optionally pass new image size as a fifth and sixth argument.

var img = new Image();
img.addEventListener('load', function() {
var doc = new jsPDF();
doc.addImage(img, 'png', 10, 50);
});
img.src = 'images/tizen.png';

In the example above, we passed an Image HTML DOM element as a first argument of the addImage function, however it can also be a base64 encoded image string. For now, the only supported image formats are jpeg/jpg and png.

Working with graphics

First, we have to set the drawn shapes fill and stroke colors. We do it using the doc.setFillColor and the doc.setDrawColor accordingly, passing RGB color values as parameters.

doc.setFillColor(100, 100, 240);
doc.setDrawColor(100, 100, 0);

We can also set the stroke width. The stroke width unit is the same as defined in the document constructor.

doc.setLineWidth(1);

Every shape drawing function takes the center point coordinates (triangle is the only exception) as two first parameters. They also take the last parameter drawing style. It can be "S", "F", "DF", "FD" string and the meanings are: "stroke", "fill", "stroke and fill", "fill and stroke". The last two of course differ in the order of the drawing operations.

We can draw an ellipse, by passing two radiuses...

// Empty ellipse
doc.ellipse(50, 50, 10, 5);

// Filled ellipse
doc.ellipse(100, 50, 10, 5, 'F');

// Filled circle with borders
... or a circle, by passing only one radius...
doc.circle(150, 50, 5, 'FD');

... or a rectangle, by passing its width and height...
// Empty square
doc.rect(50, 100, 10, 10);

// Filled square
doc.rect(100, 100, 10, 10, 'F');

// Filled square with borders
doc.rect(150, 100, 10, 10, 'FD');

... a rounded rectangle, by passing its width, height and border radiuses...
// Filled sqaure with rounded corners
doc.roundedRect(50, 150, 10, 10, 3, 3, 'FD');

... and a triangle, by passing each corners coordinates.
// Filled triangle with borders
doc.triangle(50, 200, 60, 200, 55, 210, 'FD');

We can also draw lines passing through the coordinates of two points.

// Line
doc.line(50, 250, 100, 250);

If you have any question for this JavaScript PDF Creator Library, please feel free to let us know, we are glad to assist you asap.

Write a review

Note: HTML is not translated!
    Bad           Good
Captcha

JavaScript PDF Creator Library

  • Product Code: MOD190715073315
  • Availability: In Stock
  • Viewed: 3431
  • Sold By: BestScripts
  • Seller Rating:
  • Seller Reviews: (0)
  • $19.95

  • Ex Tax: $19.95

Available Options


Related Products

Online Javascript HTML5 Gauntlet Game

Online Javascript HTML5 Gauntlet Game

Online Javascript HTML5 Gauntlet Game Javascript Gauntlet Game Features: Play as Warrior, V..

$9.95 Ex Tax: $9.95

PDF Virtual Printer Based on Postscript Printer Driver

PDF Virtual Printer Based on Postscript Printer Driver

PDF Virtual Printer Based on Postscript Printer Driver PDF Virtual Printer is a PDF Printer Drive..

$1,500.00 Ex Tax: $1,500.00

Review Comments - Easy Comments & Review System PHP Script

Review Comments - Easy Comments & Review System PHP Script

Review Comments (eComments) - Easy Comments & Review System PHP Script eComments is a PHP comment..

$19.95 Ex Tax: $19.95

XPS to PDF Converter Command Line

XPS to PDF Converter Command Line

XPS to PDF Converter Command Line does convert from XPS and OXPS files to PDF and Image files. Bo..

$79.00 Ex Tax: $79.00

HTML5 Signature Pad to Image

HTML5 Signature Pad to Image

HTML5 Signature Pad to Image is a JavaScript library for drawing smooth signatures. It's HTML5 can..

$19.95 Ex Tax: $19.95

PDF Margin Cropper (GUI + Command Line)

PDF Margin Cropper (GUI + Command Line)

PDF Margin Cropper Tool can be used to remove excessive white borders and margins around PDF pages..

$79.00 Ex Tax: $79.00

Excel to HTML Table Converter With Search & Pagination using PHP, Excel To PDF

Excel to HTML Table Converter With Search & Pagination using PHP, Excel To PDF

Excel to HTML Table Converter is a great PHP script that will help you to importing Excel data int..

$29.95 Ex Tax: $29.95

Save
25%

TrueType TTF Font to SVG Converter Command Line

TrueType TTF Font to SVG Converter Command Line

TrueType TTF Font to SVG Converter Command Line is a software that can convert a single character ..

$59.95 $79.95 Ex Tax: $59.95

HTML to PDF Converter Command Line

HTML to PDF Converter Command Line

VeryUtils HTML To PDF Converter Command Line is a Command Line Tool that lets you create PDF docum..

$399.00 Ex Tax: $399.00

PHP FileManager

PHP FileManager

Digital Online File Manager is a Web Based File Manager which written in PHP. Manage Your Files Ef..

$19.95 Ex Tax: $19.95

Tiny Platformer Online HTML5 Javascript Game

Tiny Platformer Online HTML5 Javascript Game

Tiny Platformer Online HTML5 Javascript Game..

$9.95 Ex Tax: $9.95

Email RSS Feeds as PDF Newspaper

Email RSS Feeds as PDF Newspaper

Convert RSS Feeds to PDF Newspaper with Email Subscription RSS Feeds To PDF Maker is a PHP Script..

$299.00 Ex Tax: $299.00

Save
17%

PowerPoint to Video Converter for C#

PowerPoint to Video Converter for C#

PowerPoint to Video Converter for C# Source Code Convert PowerPoint and ODP presentations to MP4, W..

$49.95 $59.95 Ex Tax: $49.95

Save
13%

docuPrinter GUI, Command Line and SDK

docuPrinter GUI, Command Line and SDK

docuPrinter SDK is a Virtual PDF/PS/Image Printer Driver -- Convert, Email, Print or Combine docum..

$69.00 $79.00 Ex Tax: $69.00

Tags: jspdf, js pdf, javascript pdf, pdf maker, pdf generator, make pdf, pdf maker, client pdf, pdf generation, generate pdf, pdf server, pdf writer, write pdf, render pdf, pdf render, web page pdf, web pdf, html5 pdf, pdf library, pdf sdk