Generating PDFs from Web Pages on the Fly with jsPDF

jsPDF: A powerful tool for client PDF generation, fine control of page elements

Core points:

• jsPDF is a JavaScript library that allows the generation of PDF files directly on the client side, thereby speeding up processing. It is especially suitable for precise control of the position, size and paging of elements in a document.
• jsPDF library is easy to use for basic PDF file generation, but due to limited documentation, it can be more challenging for complex projects. However, it provides the ability to add text, images, and shapes to PDFs, and provides precise control of position and size.
• jsPDF library can be extended using its API. Functions such as textAlign() can be added and text properties can be changed using setFontSize(), setFont(), setTextColor(), and setFontType() methods.
• jsPDF also allows creating multi-page PDFs, adding tables using the "autoTable" plugin, and including hyperlinks. However, due to browser security restrictions, users cannot specify a specific save location for the generated PDF.

Portable Document Format (PDF) is a major innovation in the fields of desktop publishing and office automation.

It is also widely used in web publishing, but unfortunately, it is often used incorrectly - for example to replace content that should have been built with HTML. This leads to many questions about usability, accessibility, SEO and more.

However, PDF files are required in some cases: when archived documents are required and must be used outside the network (such as invoices), or when deep control of printing is required. It is the need for printing control that prompts me to study a way to easily generate PDFs.

The purpose of this article is not just to simply explain how to create a PDF (there are many simple ways to do this), but also to focus on where PDF files can solve problems, and like jsPDF How to help with simple tools.

Print processing

Anyone who has dealt with CSS printing rules understands how difficult it is to achieve decent cross-browser compatibility (for example, check out the page break support table in Can I Use). So when I need to build something that I have to print, I always try to avoid using CSS, the easiest solution is to use PDF. What I am talking about here is not a simple HTML to PDF conversion. (I've tried several such tools, but none of them totally satisfy me.) My goal is to have full control over the position and size of elements, page breaks, etc.

In the past, I used to use FPDF, a PHP tool that easily gives you this kind of control and can easily extend it with many plugins.

Unfortunately, the library seems to have been abandoned (its last version dates back to 2011) (Update: In fact, the latest version seems to be released in December 2015), but thanks to some JavaScript libraries, we are now PDF files can be built directly on the client side (so that they are generated faster).

A few months ago, when I started my project, I searched for a JS library and eventually I found two candidates: jsPDF and pdfmake. pdfmake seems to be well documented and easy to use, but since it is a beta I chose jsPDF.

Build PDF using jsPDF

jsPDF documentation is quite short, including a page along with some demos, as well as more information in the source file (or its jsDoc page), so remember that using it for complex projects can be a bit difficult at the beginning.

Anyway, jsPDF is very easy for basic PDF files to be generated. Let's look at a simple "Hello World" example:

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

This HTML page generates a single page PDF file and saves it to your computer. First, you have to link to the jsPDF library (in this case, from cdnjs.com), then create a jsPDF instance, add a line of text, and save the result as hello_world.pdf.

Note that I used version 1.0.272 and it is not the latest: at the time of writing, the latest version is 1.1.135, but it has a lot of problems, so I'm still using the previous version.

You can see how easy it is to build a basic PDF file (you can find more examples on the jsPDF website).

Let's try to build more complex content.

Flyer item

I was asked to build an application for creating some simple flyers a few months ago. It is part of a larger project that deals with travel agency services, the real flyer section is populated with some JSON data.

The main purpose of the flyer is to provide an easy way to display the special offers to be displayed in the travel agency store window.

I've rescheduled the app for this article, removed all server-side features, simplified flyer design, got rid of legacy browser compatibility, and built a very simple UI using Bootstrap 3 and jQuery.

This demo works well with Firefox and Chrome, while Explorer (or Edge) does not allow you to show previews, but can only download the generated PDF.

This is an example PDF created using the app (photo source: Rafael Leão/Unsplash)

A runnable demo can be found at the end of this article or directly in CodePen. Note that since CodePen loads the result page in iframe, PDF previews loaded in iframes have some issues in Chrome and Safari, preventing the preview from being displayed. (If you can, use Firefox, or try the demo on my personal website).

Flyer Builder

The user interface allows the user to insert some basic data (title, summary and price). You can choose to add an image, otherwise the gray box's "Special Offer" title will be displayed.

Other data (agent name and its website URL and logo) are embedded in the application code.

PDF can be previewed in iframe (except Explorer or Edge) or downloaded directly.

When clicking the "Update Preview" or "Download" button, the PDF is generated using jsPDF and passed to the iframe as a data URI string or saved to disk, as shown in the above example.

PDF generation First use the following options to create a new jsPDF object instance: portrait orientation (p), millimeter units (mm), "A4" format.

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

Use the addImage function to add images. Note that every object placed in a PDF page must be precisely positioned. You must use declared units to handle each object coordinate.

var pdf = new jsPDF('p', 'mm', 'a4');

Image must be Base64 encoding: the proxy logo is embedded in the script in this format, while the user-loaded image is encoded using the readAsDataURL method in the $('#flyer-image').change listener.

Title is added using the textAlign function. Note that this function is not a part of the jsPDF core, but, as the author suggests in his example, the library can be easily extended using its API. You can find the textAlign() function at the top of the flyer builder script:

// pdf.addImage(base64_source, image format, X, Y, width, height)
pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);

This function calculates the X coordinate of the text string to center it, and then calls the native text() method:

pdf.textAlign(flyer_title, {align: "center"}, 0, _y);

To change text properties, you can use the setFontSize(), setFont(), setTextColor(), and setFontType() methods.

For example, to set a 20pt Times Bold red string, you need to type the following:

pdf.text(text string, X, Y);

"Special Offer" gray box and price circle use two similar methods: roundedRect() and circle(). Both require the upper left corner coordinates, size value (width and height in the first case and radius in the second case):

pdf.setFontSize(20);
pdf.setFont("times");
pdf.setFontType("bold");
pdf.setTextColor(255, 0, 0);
pdf.text(10,10, 'This is a 20pt Times Bold red string');

style parameter refers to the fill and stroke properties of an object. Valid styles include: S [default] for stroke, F for padding, DF (or FD) for padding and stroke.

The

Fill and stroke properties must be preset with setFillColor and setDrawColor, which require the RGB value and setLineWidth, which require the linewidth value in the units declared at the beginning of the PDF document creation.

The complete code can be found in the CodePen demonstration:

(The CodePen link should be inserted here, since I can't access external websites, it cannot be provided)

Conclusion

This basic example shows how to build a very basic flyer using jsPDF.

It may be simple to use, but the lack of complete documentation makes each step very complicated.

I'm still looking for other solutions, focusing on other solutions like pdfmake. But in the end, I think the only really clear solution is to better support browsers that print CSS rules!

(The FAQ part should be included here, the content is the same as the original text, but the format can be adjusted as needed)

The above is the detailed content of Generating PDFs from Web Pages on the Fly with jsPDF. For more information, please follow other related articles on the PHP Chinese website!