CN119129532A - 一种基于前端语言生成pdf的方法 - Google Patents

Abstract

本申请公开了一种基于前端语言生成PDF的方法，属于计算机技术领域。本申请首先将待处理前端语言的代码、代码类型、动态数据和代码依赖项写入服务端；再依照代码类型生成渲染文件和水合文件；随后调用所述渲染文件通过服务端渲染技术将所述代码和动态数据渲染成html代码；再将所述代码依赖项和html代码插入到html模板中对应位置形成html页面；之后调用所述水合文件对html页面进行水合；最后访问所述html页面并生成待处理前端语言对应的PDF文件。本申请方法支持所有流行的前端语言或框架，采用本申请方案可以轻松生成复杂且高保真的PDF文档。

Description

一种基于前端语言生成PDF的方法

技术领域

本申请属于计算机技术领域，更具体地，涉及一种基于前端语言生成PDF的方法。

背景技术

随着各行各业的发展，用户对PDF文档的内容要求越来越复杂，不仅要求PDF文档中包含文本、图片、表格、图表等，而且还对PDF文档的美观程度及清晰度都有很高要求。

目前基于计算机语言生成PDF的技术手段主要分为两大类，一种是通过前端实现，前端开发通过canvas技术或操作DOM技术生成PDF，但是会存在PDF内容截断和PDF清晰度不够等问题。另一种是通过后端实现，通过后端实现可生成高保真PDF文档，但是后端要生成满足用户复杂需求的PDF文档就必须很熟悉前端开发技术，这增加了后端开发的学习成本。总体来说，现阶段要想生成一份复杂且高保真的PDF文档比较困难。

发明内容

针对现有技术的以上缺陷或改进需求，本申请提供了一种基于前端语言生成PDF的方法，其目的在于解决现阶段生成复杂且高保真PDF文档过于困难的技术问题。

为实现上述目的，第一方面，本申请提供了一种基于前端语言生成PDF的方法，包括：

依据代码类型将待处理前端语言的代码、动态数据和代码依赖项写入服务端；

通过服务端渲染技术将所述代码和动态数据渲染成html代码；

将所述代码依赖项和html代码插入到html模板中对应位置形成html页面；

对html页面进行水合；

访问所述html页面并生成待处理前端语言对应的PDF文件。

优选的，依照代码类型生成渲染文件和水合文件；调用所述渲染文件通过服务端渲染技术将所述代码和动态数据渲染成html代码；调用所述水合文件对html页面进行水合。

优选的，依据代码类型将前端语言的代码写入服务端，具体为：

若前端语言的代码类型为html，则将html代码以字符形式写入服务端；

若前端语言的代码类型为ejs，则使用ejs模板引擎将ejs代码渲染成html后以字符形式写入服务端；

若前端语言的代码类型为react、preact、solid、vue或svelte，则直接将对应代码写入服务端。

优选的，若前端语言的代码类型为react、preact、solid、vue或svelte，则直接将对应代码写入服务端，并将对应代码的插件引入配置文件。

优选的，将所述代码和动态数据渲染成html代码前，将配置文件、启动服务文件、项目依赖项和html模板写入服务端。

优选的，将所述代码和动态数据渲染成html代码前，执行启动服务文件，启动服务。

优选的，将所述代码和动态数据渲染成html代码前，安装项目依赖项。

优选的，通过浏览器访问html页面并生成PDF文件。

第二方面，本申请提供一种电子设备，包括：存储器，用于存储程序；处理器，用于执行存储器存储的程序，当存储器存储的程序被执行时，处理器用于执行第一方面中任一所述的方法。

第三方面，本申请提供一种存储介质，存储介质存储有计算机程序，当计算机程序在处理器上运行时，使得处理器执行第一方面中任一所述的方法。

总体而言，通过本申请所构思的以上技术方案与现有技术相比，具有以下有益效果：

本申请方案在服务端通过服务端渲染技术将各种前端代码渲染成html页面，再通过访问html页面生成高保真PDF文档。采用本申请方案无需熟练掌握各类型前端语言，也可以轻松生成复杂且高保真PDF文档。同时，本申请技术方案支持目前所有流行的前端语言。

附图说明

图1是本发明实施例提供的一种基于前端语言生成PDF的方法流程图；

图2是本发明实施例提供的一种电子设备的组成结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

本文中的说明书和权利要求书中的术语“第一”和“第二”等是用于区别不同的对象，而不是用于描述对象的特定顺序。例如，第一响应消息和第二响应消息等是用于区别不同的响应消息，而不是用于描述响应消息的特定顺序。

在本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。

在本申请实施例的描述中，除非另有说明，“多个”的含义是指两个或者两个以上，例如，多个处理单元是指两个或者两个以上的处理单元等；多个元件是指两个或者两个以上的元件等。

本申请方法所需要接收的多个参数如下：

代码(code)：要生成pdf样式的前端语言代码(包括html代码、ejs代码、react代码、vue代码、svelte代码、preactjs代码或solidjs代码)，本申请会将这个代码通过服务端渲染的方式渲染成对应的HTML；

代码类型(codeType)：包括html、ejs、react、vue、svelte、preactjs和solidjs，该参数是表示代码(code)的代码类型；

动态数据(data)：代码(code)中的代码中可能会包括动态数据，这个时候就可以将这部分数据通过动态数据(data)传入；

代码依赖项(extraResources)：包含代码(code)中提供的代码脚本，比如样式、第三方的SDK，代码依赖项(extraResources)就提供这些依赖项。

如图1所示，本申请实施例一种基于前端语言生成PDF的方法通过以下方法实现：

首先将待处理前端语言的代码、代码类型、动态数据和代码依赖项写入服务端；

再依照代码类型生成渲染文件和水合文件；

之后调用所述渲染文件通过服务端渲染技术将所述代码和动态数据渲染成html代码；

随后将所述代码依赖项和html代码插入到html模板中对应位置形成html页面；

再调用所述水合文件对html页面进行水合；

最后访问所述html页面并生成待处理前端语言对应的PDF文件。

具体包括以下步骤：

S1、首选将前端语言的代码(code)、代码类型(codeType)、动态数据(data)和代码依赖项(extraResources)作为生成PDF的参数；

S2、在服务器指定的目录$ROOT中创建临时目录temp，本申请所有的工作都在这个目录中完成；在temp目录下创建src目录。

将index.html、package.json、server.js、vite.config.js文件拷入temp目录下。

其中，index.html文件是html模板文件，用于描述网页的结构和内容。

package.json文件是项目依赖项，是NodeJs中的重要文件，用于定义项目的各种属性和配置，包括项目的名称、依赖、脚本等。通过npm工具可以方便的管理项目的依赖和运行脚本。

server.js文件是启动服务文件，是NodeJs中运行的JavaScript文件，用于启动和运行服务器，通常包含了创建和配置服务器的所需代码，以及处理客户端请求和相应的逻辑。

vite.config.js文件是配置文件，是项目的配置文件，用于定义项目的构建和开发设置。

S3、将代码依赖项(extraResources)写入renderHead.js文件拷入src目录。

S4、将代码(code)写入App文件中拷入src目录。

若代码类型(codeType)为html，则将html代码以字符形式写入临时文件。

若代码类型(codeType)为ejs，则使用ejs模板引擎将ejs代码渲染成html代码后以字符形式写入临时文件。

若代码类型(codeType)为react、preact、solid、vue或svelte，则直接将对应代码写入临时文件，并将所述代码的插件引入配置文件vite.config.js中。

S5、生成服务端渲染文件entry-server.js和客户端水合文件entry-client.js拷入src目录。

其中，entry-client.js主要对服务端渲染生成的静态页面进行水合(hydrate)使页面中的代码可以交互。

entry-server.js主要是进行服务端渲染，不同的代码类型(codeType)会调用不同的服务端框架的方法，将用户传入的代码(code)及动态数据(data)渲染成html代码。

S6、先执行npminstall，然后再执行node server.js此时服务就会启动在5173端口。

其中，npminstall是一个用于NodeJs的命令行命令。运行npminstall时，npm会从package.json文件中读取所需的依赖项，并从互联网上下载这些依赖项至temp目录。

node server.js表示执行server.js，执行server.js时启动一个服务，调用服务端渲染文件entry-server.js将所述代码(code)和动态数据(data)渲染生成html代码，将所述代码依赖项(extraResources)和html代码插入到html模板index.html的对应位置后返回浏览器；

调用客户端水合文件entry-client.js对浏览器html页面进行水合；

S7、使用puppeteer访问5173端口的html页面，使用puppeteer的API导出html页面的高保真PDF文件。

其中，puppeteer是一个Node库，它提供了一个API来通过DevTools协议控制浏览器。

S8、关闭服务，删除temp目录。

基于上述实施例中的方法，本申请实施例提供了一种电子设备，如图2所示，该电子设备可以包括：处理器(processor)810、通信接口(Communications Interface)820、存储器(memory)830和通信总线840，其中，处理器810，通信接口820，存储器830通过通信总线840完成相互间的通信。处理器810可以调用存储器830中的逻辑指令，以执行上述实施例中的方法。

此外，上述的存储器830中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。

基于上述实施例中的方法，本申请实施例提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，当计算机程序在处理器上运行时，使得处理器执行上述实施例中的方法。

基于上述实施例中的方法，本申请实施例提供了一种计算机程序产品，当计算机程序产品在处理器上运行时，使得处理器执行上述实施例中的方法。

可以理解的是，本申请的实施例中的处理器可以是中央处理单元(centralprocessing unit，CPU)，还可以是其他通用处理器、数字信号处理器(digitalsignalprocessor，DSP)、专用集成电路(application specific integrated circuit，ASIC)、现场可编程门阵列(field programmable gate array，FPGA)或者其他可编程逻辑器件、晶体管逻辑器件，硬件部件或者其任意组合。通用处理器可以是微处理器，也可以是任何常规的处理器。

本申请的实施例中的方法步骤可以通过硬件的方式来实现，也可以由处理器执行软件指令的方式来实现。软件指令可以由相应的软件模块组成，软件模块可以被存放于随机存取存储器(random access memory，RAM)、闪存、只读存储器(read-only memory，ROM)、可编程只读存储器(programmable rom，PROM)、可擦除可编程只读存储器(erasable PROM，EPROM)、电可擦除可编程只读存储器(electrically EPROM，EEPROM)、寄存器、硬盘、移动硬盘、CD-ROM或者本领域熟知的任何其它形式的存储介质中。一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于ASIC中。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在存储介质中，或者通过所述存储介质进行传输。所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘(solid state disk，SSD))等。

可以理解的是，在本申请的实施例中涉及的各种数字编号仅为描述方便进行的区分，并不用来限制本申请的实施例的范围。

以上内容本领域的技术人员容易理解，以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种基于前端语言生成PDF的方法，其特征在于，包括：

依据代码类型将待处理前端语言的代码、动态数据和代码依赖项写入服务端；

通过服务端渲染技术将所述代码和动态数据渲染成html代码；

将所述代码依赖项和html代码插入到html模板中对应位置形成html页面；

对html页面进行水合；

访问所述html页面并生成待处理前端语言对应的PDF文件。

2.根据权利要求1所述的方法，其特征在于，依照代码类型生成渲染文件和水合文件；调用所述渲染文件通过服务端渲染技术将所述代码和动态数据渲染成html代码；调用所述水合文件对html页面进行水合。

3.根据权利要求1所述的方法，其特征在于，依据代码类型将前端语言的代码写入服务端，具体为：

若前端语言的代码类型为html，则将html代码以字符形式写入服务端；

若前端语言的代码类型为ejs，则使用ejs模板引擎将ejs代码渲染成html后以字符形式写入服务端；

若前端语言的代码类型为react、preact、solid、vue或svelte，则直接将对应代码写入服务端。

4.根据权利要求3所述的方法，其特征在于，若前端语言的代码类型为react、preact、solid、vue或svelte，则直接将对应代码写入服务端，并将对应代码的插件引入配置文件。

5.根据权利要求1所述的方法，其特征在于，将所述代码和动态数据渲染成html代码前，将配置文件、启动服务文件、项目依赖项和html模板写入服务端。

6.根据权利要求1所述的方法，其特征在于，将所述代码和动态数据渲染成html代码前，执行启动服务文件，启动服务。

7.根据权利要求1所述的方法，其特征在于，将所述代码和动态数据渲染成html代码前，安装项目依赖项。

8.根据权利要求1所述的方法，其特征在于，通过浏览器访问html页面并生成PDF文件。

9.一种电子设备，其特征在于，包括：

存储器，用于存储程序；

处理器，用于执行所述存储器存储的程序，当所述存储器存储的程序被执行时，所述处理器用于执行权利要求1-8中任一所述的方法。

10.一种存储介质，所述存储介质存储有计算机程序，其特征在于，当所述计算机程序在处理器上运行时，使得所述处理器执行权利要求1-8中任一所述的方法。