Front-end technology in the age of involution - using JavaScript to generate PDF documents in the browser


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 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.

How about it? Is learning "wasted"? Might as well try, "roll" up.

The code download address used in this article:

More online demo sample codes:



2.5k 声望
20.3k 粉丝
0 条评论
首先,从框架搭建上,本篇示例采用当下流行的前后端分离的开发方式,前端使用npm作为脚手架搭建Svelte框架。 后端使用Java的SpringBoot作为后端框架。首先,介绍下在前端Svelte框架下搭建在线表格编辑器。1、在pag...

葡萄城技术团队1阅读 401

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9


2.5k 声望
20.3k 粉丝