Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to use CMS+PDF technology". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

PDF in the Front Market

This is a common requirement, so there must be some off-the-shelf technical solution. One is a server-based implementation and the other is a client-based implementation.

Relative to the server side, iText, wkhtmltopdf, prince these three are back-end PDF generation tools. Unfortunately, none of them have node APIs.

Compared to the client, the most common is the Html conversion scheme. such as JSPDF technology.

The logic of this scenario is:

Converting DOM trees to canvas objects can be done using html2canvas

To convert canvas to image, use canvas.toDataURL

Converting images to PDF can be done using jsPDF

The disadvantages of this program are also obvious:

The PDF produced is fuzzy and of low quality.

Browser compatibility, insufficient support for CSS styles, such as shadows

The paging effect is not ideal, and problems such as faults and defects will occur.

If there are outlink images in HTML, it cannot be generated.

Because the first step is to generate canvas through DOM, for extremely long reports, clicking Download before DOM is loaded will cause report generation problems.

Another option is to rely on the browser's built-in print window.print, which focuses on CSS style control. If you want to change page size, margins, header footer, etc., you may also need Prince(application, needs to be installed).

Finally, pdfmake technology, pure js technology to achieve PDF generation, providing server-side generation and client-side generation solutions, can be said to be very convenient. Dynamic presentation documents are also provided, and you can freely splice content.

I was "conquered" by this page. It can be customized to achieve header, footer customization, cover customization, watermark settings, PDF encryption and so on. It is also very convenient to use only two js, one is pdfmake.js, the other is the font file vfs_fonts.js.

Also its disadvantages are particularly obvious, text elements have no padding, style is more limited, not as flexible as html. Compared to other technologies, JS is very friendly to programmers, and more importantly, it has been maintained for 3 years. It is updated almost every month.

CMS scheme conjecture

About the understanding of CMS, you can Baidu yourself, and for me, CMS is configuration. I have written an article about CMS technical solutions for forms before, which is relative to more mature solutions. Solve the problem of commodity configuration and app dynamic display. The disadvantage was that he had no time to update and fill in the new rules.

The CMS-PDF conjecture is also to solve the problem of PDF template customization. It usually takes a team a month to develop a pdf template. What CMSPDF needs to do is to shorten development time, improve development efficiency, and provide configurable solutions.

To achieve this solution, what is considered on the first page is the way we use it and the effect we want to achieve. Popular point, that is, a set of data represents a template, and the generation of this set of data depends on our configuration (dot). Then the question we have to consider is clear:

Analyze the style of the requirement pdf and parse out the module type

Establish the relationship between template and interface data (bridge)

Create template binding relationship

pdfmake provides some nice apis that allow us to design modules and see how they work. For example, we want to configure on the left and preview on the right.

One thing to note is that pdfmake does not support Chinese by default. You need to find the font required for pdf report by yourself, and some attributes of font, such as bold and italic, also need font support.

The difficulty with this solution lies in the design of the module type. You need to establish the relationship between the page display data structure and the pdfmake code rule data structure. For module types, just follow pdfmake, just need to encapsulate a layer on top of it.

More complex is the style design of the table, such as how you configure the style of each edge of the table and establish a relationship with the data returned by the server. So it's hard to do fine patterns.

This plan has not yet landed, but it is a good practical plan. The style requirements are not particularly high can try.

"How to use CMS+PDF technology" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.