Webpage PDF exporting method based on VitePress

Abstract

The invention relates to a method for exporting a PDF (Portable Downstream Format) from a webpage based on VitePress, which specifically comprises the following steps of: S1, merging Markdown files: according to a configuration file of the VitePress, obtaining all the Markdown files, and merging all the Markdown files into a Markdown total file; s2, Markdown to HTML (Hypertext Markup Language): converting the Markdown total file in the step S1 into a character string in an HTML format, and generating an HTML file in combination with a template engine; and S3, generating a PDF (Portable Document Format) file: converting the generated HTML (Hypertext Markup Language) file by utilizing Puppeteer to obtain the PDF. According to the technical scheme, the merging and exporting process of the VitePress document is effectively simplified, and the document processing efficiency is improved. Through automatic merging, conversion and exporting processes, a user can easily generate and share a high-quality PDF document, and tedious manual operation and possible errors are avoided. In addition, the user can quickly adjust the order and style of the combined documents according to needs, and the output requirements of different types of documents can be flexibly met.

Description

Technical Field

[0001] The present invention relates to the field of document processing, and in particular to a method for exporting a web page to PDF based on VitePress. Background Art

[0002] VitePress is a lightweight static website generator built on the front-end framework Vue.js. It is widely used in the writing and display of technical documents. In actual applications, users may need to export the entire document site as a single PDF for easy distribution and archiving.

[0003] Although there are some technologies on the market that can export web pages to PDF, most of them can only export a single web page, but cannot export the entire site to a single PDF. They usually lack support for VitePress's unique structure and only use the browser's own PDF export capabilities to achieve it. They are not flexible enough and have weak customization capabilities. Summary of the invention

[0004] The purpose of the present invention is to provide a method for exporting a web page to PDF based on VitePress to overcome the deficiencies in the prior art.

[0005] To achieve the above object, the present invention provides the following technical solutions: This application discloses a method for exporting a web page to PDF based on VitePress, which specifically includes the following steps: S1. Merge Markdown files: According to the configuration file of VitePress, obtain all Markdown files and merge all Markdown files into one Markdown file; S2, Markdown to HTML: Convert the Markdown file in step S1 to an HTML format string, and then generate an HTML file in combination with a template engine; S3. Generate PDF file: Use Puppeteer to convert the generated HTML file into PDF.

[0006] Preferably, step S1 specifically includes the following sub-steps: S11. Read configuration: read the configuration file of VitePress and obtain the document structure configured by the user; S12, collecting files: according to the document structure obtained in step S11, traverse the document directory, read all Markdown files, save their paths and contents, and generate a Markdown file list; S13, replace path: traverse the Markdown file list generated in step S12, extract the file link in the Markdown file list, and determine whether there is a relative address; if so, replace it with a correct address that matches the document directory; S14. Merge content: write the file contents of the Markdown file list into a Markdown master file according to the order specified in the configuration file.

[0007] Preferably, step S2 specifically includes the following sub-steps: S21. Use markdown-it: Use the markdown-it library to convert the Markdown file in step S1 into an HTML format string; S22. Generate HTML file: Use Mustache template engine to combine the HTML format string of step S21 with the template engine to generate HTML file.

[0008] Preferably, step S3 specifically includes the following sub-steps: S31. Use Puppeteer to initialize a web page instance; S32. Refer to the configuration document of the Puppeteer library and customize the configuration; S33. Combining the web page instance obtained in step S31 and the custom configuration in step S32, the Page.pdf() method of the Puppeteer library is called to generate a PDF file.

[0009] Preferably, in step S12, all Markdown files are read through the file system module of Node.js.

[0010] Preferably, in step S13, file links in the Markdown file list are extracted by regular expression matching; the file links include image addresses.

[0011] Preferably, step S21 also includes plug-in extension and style application; the plug-in extension specifically includes the following operations: using the highlight.js library to optimize the display of code blocks in the content of the Markdown file; using the markdown-it-emoji library to support Emoji expressions when parsing the content of the Markdown file; the style application specifically includes the following operations: configuring the style with reference to the VitePress source code.

[0012] Preferably, in step S32, the custom configuration includes page layout, header and footer, page number style and document title.

[0013] Beneficial effects of the present invention: The technical solution of the present invention effectively simplifies the merging and exporting process of VitePress documents and improves the efficiency of document processing. Through the automated merging, conversion and exporting process, users can easily generate and share high-quality PDF documents, avoiding the tedious manual operation and possible errors. Users can also quickly adjust the order and style of merged documents as needed, and flexibly respond to the output requirements of different types of documents.

[0014] The features and advantages of the present invention will be described in detail through embodiments in conjunction with the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 It is a schematic diagram of the internal structure of a method for exporting a web page to PDF based on VitePress of the present invention; DETAILED DESCRIPTION In order to make the purpose, technical scheme and advantages of the present invention clearer, the present invention is further described in detail below through the accompanying drawings and embodiments. However, it should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the scope of the present invention. In addition, in the following description, the description of known structures and technologies is omitted to avoid unnecessary confusion of the concept of the present invention.

[0016] See also Figure 1 , a method for exporting a web page to PDF based on VitePress, specifically comprising the following steps: 1. Merge Markdown files: (1) Read configuration: First, read the VitePress configuration file to extract the document structure configured by the user, including the list of Markdown files that need to be merged.

[0017] (2) Collect files: traverse the specified document directory, use the Node.js file system module (such as fs) to read all Markdown files, and save their paths and contents.

[0018] (3) Replace path: Traverse the file content list generated in the previous step, extract the file link (such as image address) in the file content through regular expression matching, and determine whether there is a relative address. If so, replace it with the correct address that matches the current directory.

[0019] (4) Merge content: Finally, write the contents of all files in the above steps into a Markdown file according to the order specified in the configuration file.

[0020] 2. Convert Markdown to HTML (1) Using markdown-it: Use the markdown-it library to convert the complete Markdown file generated in the previous step into an HTML format string.

[0021] (2) Plugin extension: During the conversion process, you can enable plugins to improve the quality of generated HTML, so that the final generated PDF content is orderly, readable and beautiful. For example: use the highlight.js library to optimize the display of code blocks in Markdown file content. Use the markdown-it-emoji library to support Emoji expressions when parsing Markdown file content.

[0022] (3) Style application: During the conversion process, you can refer to the VitePress source code to configure the style, so that the visual effect of the exported PDF is consistent with that displayed on the web page.

[0023] (4) Generate HTML file: Use the Mustache template engine to combine the HTML string generated by Markdown with the style to generate an HTML file.

[0024] 3. Generate PDF file (1) Use Puppeteer to initialize a web page instance: Use Puppeteer to convert the generated HTML file into PDF. Puppeteer is a powerful headless browser that can simulate user behavior and generate high-quality PDF documents. Use puppeteer.launch() and browser.newPage() to generate a web page instance.

[0025] (2) Custom configuration: You can refer to the configuration documentation of the Puppeteer library to customize the page layout, header and footer, page number style, document title, etc.

[0026] (3) Generate PDF file: Finally, call the Page.pdf() method of the Puppeteer library to generate a PDF file.

[0027] Example: 1. Identify a VitePress project, taking the latest version v1.3.2 of the VitePress project as an example. Read the themeConfig.sidebar configuration in the configuration file .vitepress / .config.js to obtain all page configurations of this document project. Each page configuration attribute includes: text (page title), link (corresponding to the Markdown file path).

[0028] 2. Read the contents of all the Markdown files pointed to by the links in order, and write the contents to a summarized Markdown file such as r.md. When reading the file, use regular expressions to match the file path and replace it with the correct address.

[0029] 3. Load the markdown-it library and configure related plugins for content beautification, including but not limited to using the highlight.js plugin to beautify the code style, using the markdown-it-emoji plugin to support the rendering of emoji expressions, and using the markdown-it-container plugin to beautify the display of prompt information. For detailed configuration details, please refer to the configuration of the specific library. Then read the content of the r.md file output in step 2 above and input it into the markdown-it instance, output a content string, and save it in the variable content.

[0030] 4. Prepare style files. To make the final page look more beautiful, you can preset some cascading style sheets (CSS). You can easily find some existing excellent cascading style sheets from the community. For example, the open source editor VSCode has set up some cascading style sheets for Markdown rendering, which can be found in its Github repository. If the highlight.js plug-in was used in the previous step, you can also load the highlight.js library to read the appropriate theme style file. Encapsulate all cascading style sheets into HTML <style>标签，并输出一个样式字符串，用变量style保存。

[0031] 5、加载一个模板引擎，这里使用mustache。预置一个空的template.html文件用于辅助渲染，将页面标题、上述步骤4中准备的包含层叠样式表的样式style和上述步骤3中输出的内容字符串content输入到mustache引擎的render函数中，这将输出一个HTML格式的字符串。

[0032] 6、将上一步骤中的HTML格式的字符串保存到一个名为tmp.html的临时HTML文件中。

[0033] 7、加载Puppeteer库，调用其launch()方法生成一个浏览器实例。调用浏览器实例的newPage()方法生成一个页面实例，用变量page保存。将上述步骤6产生的tmp.html文件载入到页面实例中，具体方法是：将文件tmp.html使用file协议生成一个绝对地址，将这个绝对地址使用new URL()生成一个url地址，将这个url地址输入到页面实例page的goto()方法即可。

[0034] 8、参考Puppeteer库的配置文档，配置页面渲染相关的参数，比如设置页面宽高、边距、头部样式、底部样式等。将渲染参数用变量option保存。

[0035] 9、使用步骤7中的页面实例page调用其pdf()方法并传输步骤8中的option参数，即可导出最终的PDF文件。

[0036] 本发明充分利用VitePress构建网页的底层原理，通过读取VitePress的配置文件，按用户设定的顺序将所有相关的Markdown文件合并成一个文件，并利用markdown-it等库将其转换为HTML，过程中markdown-it插件能够支持丰富的样式配置进行，最终通过Puppeteer实现PDF导出；优点在于自动化程度高、灵活程度高、生成文档质量高。

[0037] 以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换或改进等，均应包含在本发明的保护范围之内。< / style>

Claims

1. A method for exporting a web page to PDF based on VitePress, characterized in that: The specific steps include: S1. Merge Markdown files: According to the configuration file of VitePress, obtain all Markdown files and merge all Markdown files into one Markdown file; S2, Markdown to HTML: Convert the Markdown file in step S1 to an HTML format string, and then generate an HTML file in combination with a template engine; S3. Generate PDF file: Use Puppeteer to convert the generated HTML file into PDF.

2. A method for exporting a web page to PDF based on VitePress as claimed in claim 1, characterized in that: Step S1 specifically includes the following sub-steps: S11. Read configuration: read the configuration file of VitePress and obtain the document structure configured by the user; S12, collecting files: according to the document structure obtained in step S11, traverse the document directory, read all Markdown files, save their paths and contents, and generate a Markdown file list; S13, replace path: traverse the Markdown file list generated in step S12, extract the file link in the Markdown file list, and determine whether there is a relative address; if so, replace it with a correct address that matches the document directory; S14. Merge content: write the file contents of the Markdown file list into a Markdown master file according to the order specified in the configuration file.

3. A method for exporting a web page to PDF based on VitePress as claimed in claim 1, characterized in that: Step S2 specifically includes the following sub-steps: S21. Use markdown-it: Use the markdown-it library to convert the Markdown file in step S1 into an HTML format string; S22. Generate HTML file: Use Mustache template engine to combine the HTML format string of step S21 with the template engine to generate HTML file.

4. A method for exporting a web page to PDF based on VitePress as claimed in claim 1, characterized in that: Step S3 specifically includes the following sub-steps: S31. Use Puppeteer to initialize a web page instance; S32. Refer to the configuration document of the Puppeteer library and customize the configuration; S33. Combining the web page instance obtained in step S31 and the custom configuration in step S32, the Page.pdf() method of the Puppeteer library is called to generate a PDF file.

5. A method for exporting a web page to PDF based on VitePress as claimed in claim 2, characterized in that: In step S12, all Markdown files are read through the file system module of Node.js.

6. A method for exporting a web page to PDF based on VitePress as claimed in claim 2, characterized in that: In step S13, file links in the Markdown file list are extracted by regular expression matching; the file links include image addresses.

7. A method for exporting a web page to PDF based on VitePress as claimed in claim 3, characterized in that: Step S21 also includes plug-in extension and style application; the plug-in extension specifically includes the following operations: using the highlight.js library to optimize the display of code blocks in the content of the Markdown file; using the markdown-it-emoji library to support Emoji expressions when parsing the content of the Markdown file; the style application specifically includes the following operations: configuring the style with reference to the VitePress source code.

8. A method for exporting a web page to PDF based on VitePress as claimed in claim 4, characterized in that: In step S32, the custom configuration includes page layout, header and footer, page number style and document title.

Images