Front-end technology in the age of involution - using JavaScript to generate PDF documents in the browser - 葡萄城技术团队

background

In the field of metrology, metrological verification is an important form, which is mainly used to evaluate the metrological performance of measuring instruments and determine whether their values are accurate and consistent.
In the link of the verification certificate, there is a difficulty, that is, it cannot be previewed online and generated intelligently.

1. Certificate management cannot meet the needs of users for precise printing, special characters or multi-page printing. Because there are many precision instruments in the metrology industry, there are often the application of some special characters or the use of some more complex measurement units.
2. The system does not support functions such as batch certificate update and batch printing. In common scenarios, issuing certificates is a process that needs to be exported in batches.
3. Real-time print preview or PDF preview cannot be met, so it is impossible to determine whether the print format, range, etc. meet the requirements before printing.
In this sharing, we will help you focus on solving two problems:

1. Generate a PDF file in the browser;
2. Solve the problem of Chinese and special characters exporting PDF garbled characters.

Generate PDF files in your browser. The front-end generation of PDF files is purely dependent on the client's browser resources. For different terminals, it is more difficult to export PDFs than the server. There are three or four mainstream browsers on the market, such as Chrome, Safari, FireFox, etc. Each browser handles text content and CSS properties inconsistently. It is possible that some configurations are feasible on a certain browser. After the device, there may be a world of difference. In addition, for the native PDF file, it only contains English fonts and does not contain any Chinese fonts, so when the exported content contains Chinese font encoding, it will display garbled characters, so usually, we need to make fonts for PDF Register action.

Common front-end export PDF methods

At present, the commonly used front-end methods for generating PDF files are roughly as follows.
1. The method of HTML2Canvas converts HTML into a picture, and then converts the picture to a PDF file. This method is more suitable for a single page.
2. jsPDF directly converts H5 into PDF.

In addition to the above solutions, use SpreadJS to design the layout directly online, and can directly generate PDF files. What are the benefits? Visual operation, less code and adaptable to different browser environments. Of course, there are certain disadvantages. For files with more fonts, different fonts need to be registered. The larger the font file, the larger the bandwidth occupied. In addition, when the file is relatively large, there may be performance problems, but this is almost a bottleneck for the front-end export of PDF files. Then the ideal solution is to design and display on the front-end (SpreadJS), and finally hand it over to the back-end to export individually or in batches.

Generate PDF files in browser

Having introduced so much, let's go back to the topic of this article, how to generate PDF files through the front end. To use SpreadJS and export PDF related functions, you first need to introduce related resources on the page.

Then create a DOM to host the table instance.

Initialize the form control and load the designed form, or you can implement a simple assignment operation through the setValue interface.

If you want the form to be exported according to the specified requirements, you can set the printing-related configuration through code, or you can use the designer to design. The following is the code related to configuring printing information.

Finally, by calling the savePDF method to convert the workbook object into a blob, we can preview the pdf through window.open or directly save the blob as a PDF file through some plugins that save files.

This is the effect after open, we can directly export the PDF file through the browser or call the print interface of the browser to print. (demo is in the attachment named PDF folder)

Solve Chinese and special characters export PDF garbled

As mentioned earlier, in China, it is very common to report in Chinese. In related scenarios such as measurement and testing, special characters are also used more. Before the corresponding fonts are registered, the exported Chinese fonts and special fonts display garbled characters. Therefore, it is also necessary to deal with the problem of exporting Chinese and PDF garbled characters with special characters.

The registered fonts were mentioned earlier, so how should our fonts come from? What font format do you want? First, confirm which fonts our form needs to use, and then find the ttf file of the corresponding font (available on the computer or on some font websites, pay attention to copyright issues). After finding it, convert it to a file in base64 format. Specifically how to convert, you can find some online file converters, but the online ones may crash because the font files are too large, or the capable boss can write a conversion tool by himself. Then store our font file as a js file in our project in the following way.

The initialization forms are basically the same as the above operations, and the following are the key steps to register fonts. We define a font object, which only defines normal fonts, and the simkai.ttf inside is the font file we created above.

Another point to note is that although the font is registered, the corresponding Chinese font must be set. Or to put it another way, if you need to set the font on the form, just register the corresponding font.
Then let's take a look at special characters. The steps for registering fonts and Chinese fonts are the same. The special thing is that in order to display special characters on the page, we need to specify a font-family through the font-face of css. For example, a special font called sunway-font was created and wanted to be displayed on the page.

Finally, export the PDF file through the savePDF method, and you can see that the Chinese and special characters of the PDF can be displayed normally.