PPT export method and device based on HTML page, equipment and medium

Abstract

The application discloses a PPT export method and device based on an HTML page, equipment and a medium, applied to the technical field of computers, comprising: identifying the content type of a front-end page constructed based on HTML; calling the native interface of a slide generation tool to export the structured content of the front-end page to a PPT; using snapshot technology, rendering a three-dimensional model of the front-end page after selecting a perspective, obtaining a rendering result, converting the rendering result into an image and embedding the image into the PPT; using delay rendering technology to render decorative chart elements of the front-end page, and after rendering, intercepting the image of the corresponding area and exporting the intercepted image to the PPT. The application realizes high-fidelity, high-automation, editable and visually consistent multi-source heterogeneous content PPT export, effectively opening up a high-quality migration path from Web visual content to a PowerPoint presentation document.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method, apparatus, device, and medium for exporting PPT based on HTML pages. Background Technology

[0002] Exporting front-end pages as PowerPoint presentations is a technical solution used to preserve the complete visual effects of the page and improve the consistency of the exported content. This method is widely used in various front-end visualization systems, aiming to realistically reproduce the current visual state of the page as much as possible, achieving a "what you see is what you get" export experience, thereby supporting higher-quality reporting and presentation needs. Traditional export methods have significant limitations when dealing with visually-driven front-end pages. For example, 3D models rendered using Three.js cannot be directly exported, custom borders and decorative styles in ECharts charts cannot be fully preserved, and complex DOM layering structures, CSS (Cascading Style Sheets) animation effects, and responsive layouts are also lost during the export process, resulting in severely distorted PowerPoint presentations that affect their readability and presentation.

[0003] Therefore, how to provide a high-fidelity PPT export method that also supports the export of PPTs with complex visual pages is a technical problem that urgently needs to be solved. Summary of the Invention

[0004] In view of this, the purpose of the present invention is to provide a PPT export method, apparatus, device and medium based on HTML pages, which solves the problems of existing PPT export methods being unable to support the export of PPTs with complex visual pages and the distortion of exported PPTs.

[0005] To address the aforementioned technical problems, this invention provides a PPT export method based on HTML pages, comprising:

[0006] Identify the content type of the front-end page, which includes structured content, 3D models, and decorative chart elements; the front-end page is a front-end page built based on HTML;

[0007] The native interface of the slide generator is called to export the structured content of the front-end page to PowerPoint.

[0008] Using snapshot technology, the 3D model of the front-end page is rendered after a selected viewpoint to obtain the rendering result. The rendering result is then converted into an image and exported to the PPT.

[0009] The decorative chart elements on the front-end page are rendered using time-delay rendering technology, and the corresponding area is captured after rendering. The captured image is then exported to the PPT.

[0010] Optionally, using snapshot technology, the 3D model of the front-end page is rendered after selecting a viewpoint to obtain a rendering result. The rendering result is then converted into an image and exported to the PPT, including:

[0011] Obtain scene parameters corresponding to the target viewpoint; the target viewpoint is the viewpoint obtained by the user by rotating or scaling the 3D model; the scene parameters include the position of the 3D model and the camera angle.

[0012] Upon receiving the export instruction, a rendering operation is triggered based on the scene parameters to obtain the rendering result of the 3D model from the target viewpoint.

[0013] The rendering result is extracted from the rendering carrier and converted into a bitmap format image;

[0014] The bitmap image is exported to the PowerPoint presentation using the image insertion interface of the slide generator.

[0015] Optionally, the decorative chart elements of the front-end page are rendered using delayed rendering technology, and the corresponding area is cropped after rendering. The cropped image is then exported to the PPT, including:

[0016] Locate the specified document object model area where the decorative chart element is located, and determine the area to be screenshotted;

[0017] An animation frame request mechanism is initiated, and a delay of at least two frames is allowed to ensure that the animation effects and complex styles of the decorative chart elements within the area to be screenshotted are fully rendered.

[0018] Once rendering is complete, the front-end screenshot tool is invoked to capture the area to be screenshotted, generating a bitmap format image containing the complete visual style;

[0019] The bitmap image is exported to the PowerPoint presentation using the image insertion interface of the slide generator.

[0020] Optionally, the structured content of the front-end page can be exported to PowerPoint by calling the native interface of the slide generation tool, including:

[0021] The text elements of the front-end page are exported to the PPT through the text addition interface of the slide generation tool;

[0022] The images on the front-end page are exported to the PPT using the image insertion interface of the slide generator.

[0023] The audio and video content of the front-end page can be exported to the PPT through the audio and video insertion interface of the slide generation tool;

[0024] The table content of the front-end page is exported to the PPT through the table insertion interface of the slide generation tool;

[0025] The standard charts from the front-end page are exported to the PowerPoint presentation using the chart insertion interface of the slide generator.

[0026] Optionally, the images on the front-end page can be exported to the PowerPoint presentation via the image insertion interface of the slide generator, including:

[0027] If the image on the front-end page is a scalable vector graphics image, then the scalable vector graphics image is converted into a bitmap image, while retaining the transparent background of the image;

[0028] The bitmap image with a transparent background is exported to the PPT through the image interface.

[0029] Optionally, after exporting the audio and video content of the front-end page to the PPT through the audio and video insertion interface of the slide generation tool, the method further includes:

[0030] Extract the first frame of the video from the front-end page and export the first frame as the cover image of the video to the PPT.

[0031] The present invention also provides a PPT export device based on an HTML page, comprising:

[0032] The content type identification module is used to identify the content type of the front-end page, which includes structured content, 3D models, and decorative chart elements; the front-end page is a front-end page built based on HTML.

[0033] The structured content export module is used to call the native interface of the slide generation tool to export the structured content of the front-end page to PPT;

[0034] The 3D model export module is used to render the 3D model of the front-end page using snapshot technology after selecting a viewpoint, obtain the rendering result, convert the rendering result into an image, and export it to the PPT.

[0035] The decorative chart element export module is used to render the decorative chart elements of the front-end page using delayed rendering technology, and after rendering, to capture the image of the corresponding area and export the captured image to the PPT.

[0036] Optionally, the 3D model export module includes:

[0037] A scene parameter acquisition unit is used to acquire scene parameters corresponding to a target viewpoint; the target viewpoint is the viewpoint obtained by the user by rotating or scaling the 3D model; the scene parameters include the position of the 3D model and the camera angle.

[0038] The rendering unit is used to trigger a rendering operation based on the scene parameters after receiving the export instruction, and obtain the rendering result of the three-dimensional model from the target viewpoint.

[0039] The format conversion unit is used to extract the rendering result from the rendering carrier and convert it into a bitmap format image;

[0040] The 3D model export unit is used to export the bitmap format image to the PPT through the image insertion interface of the slide generation tool.

[0041] The present invention also provides a PPT export device based on an HTML page, comprising:

[0042] Memory, used to store computer programs;

[0043] A processor, used to implement the HTML-based PPT export method described above when executing the computer program.

[0044] The present invention also provides a medium storing computer-executable instructions, which, when loaded and executed by a processor, implement the above-described method for exporting PPT based on HTML pages.

[0045] As can be seen, this invention identifies the content types of a front-end page, including structured content, 3D models, and decorative chart elements; the front-end page is built based on HTML; the structured content of the front-end page is exported to PowerPoint by calling the native interface of a slideshow generation tool; using snapshot technology, the 3D model of the front-end page is rendered after a selected viewpoint, and the rendered result is converted into an image and exported to PowerPoint; the decorative chart elements of the front-end page are rendered using time-delay rendering technology, and the corresponding area is captured after rendering and exported to PowerPoint. Therefore, this invention achieves high-fidelity reproduction of complex visual content by identifying content types such as structured content, 3D models, and decorative chart elements; exporting structured content using the native interface of a slideshow generation tool; rendering and converting 3D models into images after a user-selected viewpoint using snapshot technology; and rendering and capturing images of decorative chart elements using time-delay rendering technology. It balances content editability and compatibility, improves export efficiency and consistency, adapts to complex HTML page scenarios, and opens up a high-quality migration path from webpage visualization content to presentations.

[0046] In addition, the present invention also provides a PPT export device, apparatus and computer-readable storage medium based on HTML pages, which also have the above-mentioned beneficial effects. Attached Figure Description

[0047] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0048] Figure 1 A flowchart illustrating a PPT export method based on an HTML page, provided as an embodiment of the present invention;

[0049] Figure 2 A flowchart illustrating a PPT export method based on an HTML page, provided as an embodiment of the present invention;

[0050] Figure 3 A schematic diagram of a PPT export device based on an HTML page provided in an embodiment of the present invention;

[0051] Figure 4 This is a schematic diagram of a PPT export device based on an HTML page, provided as an embodiment of the present invention. Detailed Implementation

[0052] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0053] First, let's clarify some of the terms used in this invention:

[0054] Web: Can be understood as web pages or websites, and typically takes three forms: hypertext, hypermedia, and hypertext transfer protocol. A complete web consists of a front-end and a back-end. The front-end uses HTML, CSS, and JavaScript, which are all languages. HTML, or Hypertext Markup Language, is the standard markup language used to create web pages; CSS, or Cascading Style Sheets, describes how a web page is presented, including layout, color, and fonts; JavaScript is a high-level programming language often used to add interactivity and dynamic functionality to web pages.

[0055] ECharts: A JavaScript-based data visualization chart library that can generate a variety of interactive charts.

[0056] Three.js: A JavaScript-based 3D graphics library for creating and displaying 3D computer graphics on web pages.

[0057] PPTXGENJS: A JavaScript library for generating PPTX format presentations.

[0058] WebGL: Web Graphics Library, is a 3D graphics standard that allows rendering high-performance interactive 3D and 2D graphics in the browser without the need for plugins.

[0059] SVG: Scalable Vector Graphics, is an XML markup language used to describe two-dimensional vector graphics, allowing images to be scaled without loss of quality.

[0060] GPU: Graphics Processing Unit, is a microprocessor specifically designed for handling graphics and image-related calculations.

[0061] DOM: Document Object Model, is a programming interface for representing and manipulating HTML and XML documents, structuring the document into a tree-like model.

[0062] addText(): Adds text (a method in the PPTXGENJS library).

[0063] addImage(): Inserts an image (a method in the PPTXGENJS library).

[0064] addMedia(): Inserts audio and video content (a method in the PPTXGENJS library).

[0065] addTable(): Inserts table content (a method in the PPTXGENJS library).

[0066] addChart(): Inserts chart content (a method in the PPTXGENJS library).

[0067] html2canvas: A JavaScript library that converts a webpage or a specific element within a webpage into a Canvas image.

[0068] canvas: An element in HTML5 used to draw graphics, animations, etc. on a webpage using JavaScript.

[0069] video: refers to the video file in the front-end page.

[0070] `renderer.render()`: The `Render` function is used to create virtual DOM nodes. It provides a more flexible way to define the structure and behavior of components than templates.

[0071] domtoimage: A JavaScript library for converting DOM elements into images.

[0072] toDataURL(): Retrieves a Base64 encoded image URL from the Canvas element. This method can return images in different formats by specifying different type parameters; the default is PNG format.

[0073] requestAnimationFrame: A JavaScript method used to update animations before the browser's next repaint, enabling smooth animation effects.

[0074] domtoimage.toPng(): domtoimage is a JavaScript library that uses this function to convert any DOM node into a PNG image.

[0075] With the development of front-end technologies, more and more business systems are adopting web front-ends for data display and interaction, especially in scenarios such as data visualization, information dashboards, intelligent operation and maintenance, and teaching demonstrations. Interfaces built with HTML, CSS, and JavaScript not only possess high interactivity and visual appeal but also support various functions such as chart rendering (e.g., ECharts), 3D display (e.g., Three.js), and media playback (e.g., audio and video). These pages often carry complex data structures and dynamic interactive logic, and users' demand for "exporting the current page content as a PowerPoint presentation" is increasingly strong. Exporting HTML-based front-end pages as PowerPoint is a technical solution to preserve the complete visual effect of the page and improve the consistency of the exported content. This method is widely used in various front-end visualization systems, especially in pages containing charts (e.g., ECharts), multimedia components (e.g., video and audio), 3D models (e.g., content rendered by Three.js), and complex DOM decorations and layouts. It aims to realistically reproduce the current visual state of the page as much as possible, achieving a "what you see is what you get" export experience, thereby supporting higher-quality reporting and presentation needs.

[0076] Traditional PPT generation methods primarily rely on manual copying and pasting of screenshots, or rendering in the backend and sending the content back to the frontend. This approach is inefficient, inconsistent, and unable to dynamically respond to changes in page interaction. Therefore, research into automated export of frontend pages to PPT has gradually become an important direction for improving presentation quality and reducing manual operation costs. Traditional export methods based on PPTXGENJS mainly depend on its standardized interfaces to insert text, charts, tables, images, and audio / video content. While these methods have advantages in structured export and content editing, they have significant limitations when handling frontend pages with rich visual layers: 1) Inability to support 3D model content: 3D models rendered using Three.js cannot be directly exported to PPT. 2) Inability to retain complex styles and decorations: Custom styles, legends, borders, shadows, gradients, animation frames, and animation effects in ECharts charts cannot be reproduced. 3) Low page fidelity: The PPT content only contains structural data, but not visual styles and front-end layout information. The final generated slides often differ greatly from the actual page seen by the user, resulting in severe distortion of the exported PPT and affecting its readability and expressiveness.

[0077] To address the limitations of existing technologies, such as the inability to export 3D models, lack of custom ECharts styles, missing decorative elements, and low page fidelity, this solution proposes a PPT export method based on HTML pages. This method differentiates content types and employs a differentiated export strategy to achieve higher fidelity, greater versatility, and a superior user experience in PPT export. This approach significantly improves the fidelity and editability of complex visual page content within PowerPoint.

[0078] Please refer to Figure 1 , Figure 1 A flowchart illustrating a PPT export method based on an HTML page, provided as an embodiment of the present invention. The method may include:

[0079] S101: Identify the content type of the front-end page, which includes structured content, 3D models, and decorative chart elements; the front-end page is a front-end page built based on HTML.

[0080] The execution subject in this embodiment is a terminal. This embodiment is not limited to any particular type of terminal, as long as it can perform the PPT export method based on HTML pages. Since the content types on the front-end pages in this embodiment vary, it is necessary to identify the content types of the front-end pages and adopt different export methods for different content types.

[0081] S102: Use the native interface of the slide generator to export the structured content of the front-end page to PPT.

[0082] The structured content in this embodiment includes text, images, tables, audio and video, standard charts, etc. For structured content, this embodiment prioritizes using the native interface provided by PPTXGENJS for export. This method is suitable for exporting PPT content with clearly defined structured content and relatively simple component styles. The exported PPT file also supports later editing and secondary modifications, and has strong structural controllability.

[0083] Furthermore, the aforementioned method of calling the native interface of the slide generator to export the structured content of the front-end page to PowerPoint can specifically include the following steps: exporting text elements from the front-end page to PowerPoint using the slide generator's add text interface; exporting images from the front-end page to PowerPoint using the slide generator's insert image interface; exporting audio and video content from the front-end page to PowerPoint using the slide generator's insert audio / video interface; exporting table content from the front-end page to PowerPoint using the slide generator's insert table interface; and exporting standard charts from the front-end page to PowerPoint using the slide generator's insert chart interface.

[0084] Specifically, this embodiment uses open-source JavaScript libraries such as PPTXGENJS to call the native interface of the slideshow generation tool through code, exporting text, images, charts, audio, and video content item by item into the PowerPoint slides. For example, addText() is used to add text elements; addImage() is used to insert images; addMedia() is used to insert audio and video content; addTable() is used to insert table content; and addChart() is used to insert standard charts (such as bar charts, line charts, etc.), thereby achieving the export of structured content from HTML pages to PowerPoint.

[0085] Furthermore, the above-mentioned method of exporting images from the front-end page to PowerPoint via the image insertion interface of the slide generator can specifically include the following steps: if the image on the front-end page is a scalable vector graphic, then convert the scalable vector graphic to a bitmap format while retaining the transparent background of the image; then export the bitmap format image with the transparent background retained to PowerPoint via the image interface.

[0086] Specifically, this embodiment performs special processing on SVG images (i.e., scalable vector graphics format images). It first parses and renders them at high resolution as PNG images (bitmap format images), while retaining the transparent background. Since SVG is essentially a vector-based XML format, it is not directly supported by screenshot tools. Therefore, preprocessing and converting it to a bitmap (PNG) ensures high-quality display on any platform and avoids distortion. Meanwhile, retaining the transparent background can be achieved through the `preserveDrawingBuffer` in Canvas rendering and image channel control, ensuring the original image style is maintained in PowerPoint. This guarantees the clarity and compatibility of the exported image in PowerPoint.

[0087] Furthermore, after exporting the audio and video content of the front-end page to PPT through the audio and video insertion interface of the slide generation tool, the following steps can also be included: extracting the first frame image of the video on the front-end page and embedding the first frame image as the cover image of the video into PPT.

[0088] In this embodiment, for video in audio and video, the following can be used: <video>and <canvas>The `<video>` element draws the first frame of the video onto the canvas and obtains a Base64 image using `canvas.toDataURL()` to serve as the video's cover image. Specifically, in this embodiment, for data with audio / video content, the first frame image is automatically extracted during the loading phase using the `currentTime` property of the `<video>` element and `canvas.drawImage()`, then converted to Base64 and embedded. This first frame image accurately represents the key moments of the video content, balancing export efficiency and visual consistency, ensuring that the PowerPoint presentation can be displayed independently of a player.

[0089] Furthermore, when exporting using the native API provided by PPTXGENJS, the structured presentation of content is achieved by explicitly defining text and component styles (such as font, font size, color, alignment, indentation, and spacing) through the API. That is, the style rules for each component or text are explicitly defined in the code, and position and size are controlled through x and y coordinates and container width and height to ensure that the exported PPT maintains layout consistency and readability. Compared to relying on automatic mapping from the master template, this method breaks through template limitations and improves the flexibility and accuracy of styles; it also supports control over the component hierarchy order, adapting to complex scenarios such as multi-page and multi-component layouts. By iterating through multiple pages and components, a certain degree of automated batch export can also be achieved. Therefore, in technical development scenarios, manually defining styles and positions through the API significantly improves flexibility, controllability, and batch processing efficiency.

[0090] S103: Using snapshot technology, render the 3D model of the front-end page after selecting a viewpoint, obtain the rendering result, convert the rendering result into an image and export it to PPT.

[0091] In this embodiment, the 3D model refers to the 3D model rendered by Three.js. For exporting the 3D model, user-controllable "instant screenshot" (i.e., snapshot technology) can be used to export the 3D model from the current viewpoint as an image to the PowerPoint presentation.

[0092] Furthermore, the aforementioned snapshot technology renders the 3D model of the front-end page after selecting a viewpoint, obtains the rendering result, converts the rendering result into an image, and exports it to PowerPoint. Specifically, this can include the following steps: obtaining scene parameters corresponding to the target viewpoint; the target viewpoint is the viewpoint obtained by the user through rotating or scaling the 3D model; the scene parameters include the position of the 3D model and the camera angle; upon receiving the export command, triggering the rendering operation based on the scene parameters to obtain the rendering result of the 3D model under the target viewpoint; extracting the rendering result from the rendering carrier and converting it into a bitmap format image; and exporting the bitmap format image to PowerPoint through the image insertion interface of the slide generator.

[0093] In this embodiment, for 3D models rendered using Three.js, since their content is a WebGL-rendered Canvas layer, and traditional DOM screenshot tools (such as html2canvas or dom-to-image) cannot access the GPU-rendered WebGL layer, the 3D model often appears blank or missing. Therefore, this embodiment introduces a user-controllable instant screenshot mechanism: the user can rotate or scale the 3D model and freely choose the target viewpoint; after the user clicks export, .render() is called once, and the system can call requestAnimationFrame to ensure that render() is completed; then the WebGL rendering result is transferred from... <canvas>The image is exported as a Base64 image string in PNG format. This process is based on a combination of Three.js's `renderer.render()` and `canvas.toDataURL()`. Since `toDataURL()` reads pixels directly from the GPU buffer, it can output the 3D scene as seen from the current viewpoint. Finally, the screenshot is exported as an image to a specified location in PowerPoint, achieving a "what you see is what you get" export effect. This truly bridges the visual gap between WebGL and PowerPoint, opening up a "what you see is what you get" export path. When exporting the image to PowerPoint, the top-left corner of the container containing the 3D model is used as the anchor point. The width and height use the container size by default, and the pixel units (px) are converted to inches (inch) to achieve a precise mapping from pixels to slide size.

[0094] S104: Use time-delay rendering technology to render decorative chart elements on the front-end page, and after rendering, capture the image of the corresponding area and export the captured image to PPT.

[0095] The decorative chart elements in this embodiment refer to ECharts decorative DOM elements. On the front-end page, these include decorative elements such as ECharts borders, dynamic effects, and gradient styles, as well as page elements corresponding to structured content such as text, images, and tables. This element is rendered and screenshotted to export the complete and high-fidelity content of the front-end page to PowerPoint. In this embodiment, the corresponding area refers to the area where the rendered decorative chart is located.

[0096] Furthermore, the aforementioned use of delayed rendering technology to render decorative chart elements on the front-end page, and then capturing images of the corresponding areas after rendering, and exporting the captured images to PowerPoint, can specifically include the following steps: locating the specified Document Object Model (DOM) area where the decorative chart elements are located to determine the area to be captured; initiating an animation frame request mechanism, with a delay of at least two frames to ensure that the animation effects and complex styles of the decorative chart elements within the area to be captured are fully rendered; after rendering is complete, calling the front-end screenshot tool to capture the area to be captured, generating a bitmap format image containing the complete visual style; and exporting the bitmap format image to PowerPoint through the image insertion interface of the slide generator.

[0097] The decorative chart elements in this embodiment include ECharts borders, dynamic effects, gradient styles, and other decorative DOM elements. Because ECharts charts contain numerous animation effects, gradient colors, shadows, borders, and other decorative details, traditional export methods and regular screenshots may fail to reproduce them with high fidelity before the chart is fully rendered, resulting in lost details or incomplete styles. Therefore, this embodiment employs a delayed rendering + precise screenshot + image embedding strategy: It utilizes two calls to `requestAnimationFrame` to form a "two-frame delayed" screenshot strategy: the first frame triggers the chart update, and the second frame ensures all animations have finished executing and stabilized; then, `domtoimage.toPng()` is used to capture the specified DOM (i.e., the area to be screenshotted); finally, the screenshot (PNG image) is exported to PowerPoint as an image using the image insertion interface of a slideshow generator. From a time control perspective, this ensures that the chart state is stable before capturing the image, avoiding export defects caused by state interruptions, maximizing page style consistency, and ensuring that the exported PowerPoint is highly consistent with the original page style.

[0098] The PPT export method based on HTML pages provided in this embodiment of the invention identifies the content type of the front-end page, which includes structured content, 3D models, and decorative chart elements; the front-end page is a front-end page built based on HTML; the structured content of the front-end page is exported to PPT by calling the native interface of the slide generation tool; using snapshot technology, the 3D model of the front-end page is rendered after selecting a viewpoint to obtain a rendering result, which is then converted into an image and exported to the PPT; the decorative chart elements of the front-end page are rendered using time-delay rendering technology, and the corresponding area is cropped after rendering, and the cropped image is exported to the PPT. As can be seen, this invention identifies content types such as structured content, 3D models, and decorative chart elements. It exports structured content using the native interface of a slideshow generation tool, renders 3D models into images after the user selects a viewpoint using snapshot technology, and renders decorative chart elements using time-delay rendering technology before exporting screenshots. This achieves high-fidelity reproduction of complex visual content, balances content editability and compatibility, improves export efficiency and consistency, adapts to complex HTML page scenarios, and opens up a high-quality migration path from web page visualization content to presentations.

[0099] Furthermore, this method offers the following advantages: 1) Strong compatibility: All exported content is processed using PowerPoint's native API or high-quality image methods, ensuring compatibility with PowerPoint's editing and playback environment; 2) High fidelity: It successfully bridges the gap between WebGL rendering and PowerPoint's visual export, exporting 3D models based on snapshots from the user's current perspective, and using .render() and canvas.toDataURL for precise capture, ensuring "what you see is what you get" visual consistency; 3) Editable structure: Structured content (such as text, charts, tables, etc.) is exported using native APIs, retaining editability for subsequent modification and rearrangement in PPT. Moreover, this method supports high-resolution image export of specific areas or dynamic interfaces using front-end screenshot tools such as html2canvas and domtoimage, and integrates multiple processing mechanisms such as WebGL rendering capture, SVG transcoding, and video first-frame extraction, ultimately constructing a high-fidelity, highly automated, editable, and visually consistent multi-source heterogeneous content export solution, effectively facilitating a high-quality migration path from Web visual content to PowerPoint presentation documents.

[0100] For a clearer understanding of this invention, please refer to the following details. Figure 2 , Figure 2 This is a flowchart illustrating the HTML-based PPT export method provided in this embodiment of the invention. The flowchart presents the complete process of migrating web-based visual content to PPT: First, the front-end page is rendered, then the content type is analyzed and processed according to different types: For structured content (text, images, tables, audio, video, charts), it is processed directly in a native manner; the 3D model (Three.js) is rendered by capturing a screenshot from the current perspective and embedding the data into the PPT; ECharts decorations require high-fidelity image capture after animation rendering. Then, the PPT page is uniformly constructed, integrating various content elements, and finally the PPT file is saved locally, achieving high-quality export of multi-source heterogeneous content to PPT. The structured content in the exported PPT is editable and clearly structured; the exported 3D model results are visually consistent and highly user-controllable; the exported ECharts decorations have high fidelity and high visual fidelity of charts. Exporting ECharts decorations to PPT does not affect bar charts. Audio and video in the PPT can be played normally in the exported PPT.

[0101] The following describes the HTML-based PPT export device provided in the embodiments of the present invention. The HTML-based PPT export device described below and the HTML-based PPT export method described above can be referred to in correspondence.

[0102] Please refer to the details. Figure 3 , Figure 3 A schematic diagram of a PPT export device based on an HTML page provided in an embodiment of the present invention may include:

[0103] The content type identification module 100 is used to identify the content type of the front-end page, wherein the content type includes structured content, three-dimensional models and decorative chart elements; the front-end page is a front-end page built based on HTML.

[0104] The structured content export module 200 is used to call the native interface of the slide generation tool to export the structured content of the front-end page to PPT;

[0105] The 3D model export module 300 is used to render the 3D model of the front-end page using snapshot technology after selecting a viewpoint, obtain the rendering result, convert the rendering result into an image, and export it to the PPT.

[0106] The decorative chart element export module 400 is used to render the decorative chart elements of the front-end page using delayed rendering technology, and after rendering, to capture the image of the corresponding area and export the captured image to the PPT.

[0107] Based on the above embodiments, the structured content export module 200 may include:

[0108] The text export unit is used to export the text elements of the front-end page to the PPT through the text addition interface of the slide generation tool;

[0109] The image export unit is used to export images from the front-end page to the PPT through the image insertion interface of the slide generation tool;

[0110] The audio and video export unit is used to export the audio and video content of the front-end page to the PPT through the audio and video insertion interface of the slide generation tool;

[0111] The table export unit is used to export the table content of the front-end page to the PPT through the table insertion interface of the slide generation tool;

[0112] The chart export unit is used to export standard charts from the front-end page to the PPT through the chart insertion interface of the slide generation tool.

[0113] Based on the above embodiments, the image exporting unit may include:

[0114] The format conversion subunit is used to convert the image in the scalable vector graphics format into a bitmap format image if the image on the front-end page is in scalable vector graphics format, while retaining the transparent background of the image;

[0115] The image export subunit is used to export bitmap images with transparent backgrounds to the PPT through the image interface.

[0116] Based on the above embodiments, the PPT export device based on HTML pages may further include:

[0117] The first frame image export module is used to extract the first frame image of the video on the front-end page and export the first frame image as the cover image of the video to the PPT.

[0118] Based on the above embodiments, the 3D model export module 300 may include:

[0119] A scene parameter acquisition unit is used to acquire scene parameters corresponding to a target viewpoint; the target viewpoint is the viewpoint obtained by the user by rotating or scaling the 3D model; the scene parameters include the position of the 3D model and the camera angle.

[0120] The rendering unit is used to trigger a rendering operation based on the scene parameters after receiving the export instruction, and obtain the rendering result of the three-dimensional model from the target viewpoint.

[0121] The format conversion unit is used to extract the rendering result from the rendering carrier and convert it into a bitmap format image;

[0122] The 3D model export unit is used to export the bitmap format image to the PPT through the image insertion interface of the slide generation tool.

[0123] Based on the above embodiments, the decorative chart element export module 400 may include:

[0124] The positioning unit is used to locate the specified document object model area where the decorative chart element is located, and to determine the area to be screenshotted.

[0125] The rendering unit is used to initiate the animation frame request mechanism, and by waiting for at least two frames, it ensures that the animation effects and complex styles of the decorative chart elements in the area to be captured are fully rendered.

[0126] The screenshot unit is used to call the front-end screenshot tool to take a screenshot of the area to be screenshotted after rendering is completed, and generate a bitmap format image containing the complete visual style;

[0127] The decorative chart element export unit is used to export the bitmap format image to the PPT through the image insertion interface of the slide generation tool.

[0128] It should be noted that the order of the modules and units in the above-mentioned HTML-based PPT export device can be changed without affecting the logic.

[0129] The HTML-based PPT export device provided in this embodiment of the invention uses a content type identification module 100 to identify the content type of the front-end page, which includes structured content, 3D models, and decorative chart elements. The front-end page is an HTML-based front-end page. A structured content export module 200 is used to call the native interface of the slide generation tool to export the structured content of the front-end page to PPT. A 3D model export module 300 is used to use snapshot technology to render the 3D model of the front-end page after selecting a viewpoint, obtain the rendering result, convert the rendering result into an image, and export it to PPT. A decorative chart element export module 400 is used to use time-delay rendering technology to render the decorative chart elements of the front-end page, and after rendering, to capture the image of the corresponding area and export the captured image to PPT. As can be seen, this device identifies content types such as structured content, 3D models, and decorative chart elements. It exports structured content by calling the native interface of the slideshow generation tool, renders 3D models into images after the user selects a viewpoint using snapshot technology, and renders decorative chart elements using time-delay rendering technology and then exports screenshots. This achieves high-fidelity reproduction of complex visual content, balances content editability and compatibility, improves export efficiency and consistency, adapts to complex HTML page scenarios, and opens up a high-quality migration path from web page visualization content to presentations.

[0130] Furthermore, this device boasts the following advantages: 1) Strong compatibility: All exported content is processed using PowerPoint's native API (interface) or high-quality image methods, ensuring compatibility with PowerPoint's editing and playback environment; 2) High fidelity: It successfully bridges the gap between WebGL rendering and PowerPoint's visual export, exporting 3D models based on snapshots from the user's current perspective, and using .render() and canvas.toDataURL for precise capture, ensuring "what you see is what you get" visual consistency; 3) Editable structure: Structured content (such as text, charts, tables, etc.) is exported using the native API, retaining editability for subsequent modification and rearrangement in PPT. Moreover, this method supports high-resolution image export of specific areas or dynamic interfaces using front-end screenshot tools such as html2canvas and domtoimage, and integrates multiple processing mechanisms such as WebGL rendering capture, SVG transcoding, and video first-frame extraction, ultimately constructing a high-fidelity, highly automated, editable, and visually consistent multi-source heterogeneous content export solution, effectively facilitating a high-quality migration path from Web visual content to PowerPoint presentation documents.

[0131] The following describes the HTML-based PPT export device provided in the embodiments of the present invention. The HTML-based PPT export device described below and the HTML-based PPT export method described above can be referred to in correspondence.

[0132] Please refer to Figure 4 , Figure 4 A schematic diagram of a PPT export device based on an HTML page, provided as an embodiment of the present invention, may include:

[0133] Memory 10 is used to store computer programs;

[0134] Processor 20 is used to execute computer programs to implement the above-described HTML-based PPT export method.

[0135] The memory 10, processor 20, and communication interface 31 all communicate with each other through the communication bus 32.

[0136] In this embodiment of the invention, the memory 10 is used to store one or more programs. The programs may include program code, which includes computer operation instructions. In this embodiment of the invention, the memory 10 may store programs for implementing the following functions:

[0137] Identify the content type of the front-end page, which includes structured content, 3D models, and decorative chart elements; the front-end page is built based on HTML.

[0138] The native API of the slide generator is used to export the structured content of the front-end page to PowerPoint.

[0139] Using snapshot technology, the 3D model of the front-end page is rendered after a selected viewpoint to obtain the rendering result. The rendering result is then converted into an image and exported to PowerPoint.

[0140] Use time-delayed rendering technology to render decorative chart elements on the front-end page, and then capture the corresponding area of ​​the image after rendering. Export the captured image to PowerPoint.

[0141] In one possible implementation, the memory 10 may include a program storage area and a data storage area, wherein the program storage area may store the operating system and applications required for at least one function; and the data storage area may store data created during use.

[0142] Furthermore, memory 10 may include read-only memory and random access memory, providing instructions and data to the processor. A portion of the memory may also include NVRAM. The memory stores operating systems and operating instructions, executable modules, or data structures, or subsets thereof, or extended sets thereof, wherein the operating instructions may include various operating instructions for implementing various operations. The operating system may include various system programs for implementing various basic tasks and handling hardware-based tasks.

[0143] Processor 20 can be a central processing unit (CPU), an application-specific integrated circuit, a digital signal processor, a field-programmable gate array, or other programmable logic device. Processor 20 can be a microprocessor or any conventional processor. Processor 20 can call programs stored in memory 10.

[0144] Communication interface 31 can be an interface for the communication module, used to connect with other devices or systems.

[0145] Of course, it should be noted that, Figure 4 The structure shown does not constitute a limitation on the HTML-based PPT export device in the embodiments of the present invention. In practical applications, the HTML-based PPT export device may include more than [other types of devices]. Figure 4 More or fewer components as shown, or combinations of certain components.

[0146] The computer-readable storage medium provided in the embodiments of the present invention is described below. The computer-readable storage medium described below can be referred to in correspondence with the method described above.

[0147] The present invention also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the above-described HTML-based PPT export method.

[0148] The computer-readable storage medium may include various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0149] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to in the method section.

[0150] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this invention.

[0151] Finally, it should be noted that in this document, relationships such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus.

[0152] The foregoing has provided a detailed description of a method, apparatus, device, and computer-readable storage medium for exporting PPT based on HTML pages. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The descriptions of the above embodiments are only for the purpose of helping to understand the method and core ideas of the present invention. At the same time, for those skilled in the art, there will be changes in specific implementation methods and application scope based on the ideas of the present invention. Therefore, the content of this specification should not be construed as a limitation of the present invention.< / canvas> < / canvas> < / video>

Claims

1. A method for exporting PPT presentations based on HTML pages, characterized in that, include: Identify the content type of the front-end page, which includes structured content, 3D models, and decorative chart elements; The front-end page is a front-end page built based on HTML; The native interface of the slide generator is called to export the structured content of the front-end page to PowerPoint. Using snapshot technology, the 3D model of the front-end page is rendered after a selected viewpoint to obtain the rendering result. The rendering result is then converted into an image and exported to the PPT. The decorative chart elements on the front-end page are rendered using time-delay rendering technology, and the corresponding area is captured after rendering. The captured image is then exported to the PPT. Using snapshot technology, the 3D model of the front-end page is rendered after a selected viewpoint to obtain a rendering result. The rendering result is then converted into an image and exported to the PPT, including: Obtain scene parameters corresponding to the target viewpoint; the target viewpoint is the viewpoint obtained by the user by rotating or scaling the 3D model; the scene parameters include the position of the 3D model and the camera angle. Upon receiving the export instruction, a rendering operation is triggered based on the scene parameters to obtain the rendering result of the 3D model from the target viewpoint. The rendering result is extracted from the rendering carrier and converted into a bitmap format image; The bitmap image is exported to the PowerPoint presentation using the image insertion interface of the slide generator. The decorative chart elements on the front-end page are rendered using delayed rendering technology, and the corresponding area is cropped after rendering. The cropped image is then exported to the PPT, including: Locate the specified document object model area where the decorative chart element is located, and determine the area to be screenshotted; An animation frame request mechanism is initiated, with a delay of at least two frames to ensure that the animation effects and complex styles of the decorative chart elements within the area to be screenshotted are fully rendered; the first frame is used to trigger the chart update, and the second frame is used to ensure that all animations have finished executing and stabilized; Once rendering is complete, the front-end screenshot tool is invoked to capture the area to be screenshotted, generating a bitmap format image containing the complete visual style; The bitmap image is exported to the PowerPoint presentation using the image insertion interface of the slide generator. Also includes: When exporting using the native interface, the structured presentation of the content is achieved by explicitly defining text and component styles through the API; the component styles include font, font size, color, alignment, indentation, and spacing.

2. The PPT export method based on HTML pages according to claim 1, characterized in that, The native API of the slide generator is used to export the structured content of the front-end page to PowerPoint, including: The text elements of the front-end page are exported to the PPT through the text addition interface of the slide generation tool; The images on the front-end page are exported to the PPT using the image insertion interface of the slide generator. The audio and video content of the front-end page can be exported to the PPT through the audio and video insertion interface of the slide generation tool; The table content of the front-end page is exported to the PPT through the table insertion interface of the slide generation tool; The standard charts from the front-end page are exported to the PowerPoint presentation using the chart insertion interface of the slide generator.

3. The PPT export method based on HTML pages according to claim 2, characterized in that, Exporting images from the front-end page to the PowerPoint presentation using the image insertion interface of the slide generator includes: If the image on the front-end page is a scalable vector graphics image, then the scalable vector graphics image is converted into a bitmap image, while retaining the transparent background of the image; The bitmap image with a transparent background is exported to the PPT through the image interface.

4. The PPT export method based on HTML pages according to claim 2, characterized in that, After exporting the audio and video content of the front-end page to the PPT through the audio and video insertion interface of the slide generation tool, the method further includes: Extract the first frame of the video from the front-end page and export the first frame as the cover image of the video to the PPT.

5. A PPT export device based on HTML pages, characterized in that, include: The content type identification module is used to identify the content type of the front-end page, which includes structured content, 3D models, and decorative chart elements; The front-end page is a front-end page built based on HTML; The structured content export module is used to call the native interface of the slide generation tool to export the structured content of the front-end page to PPT; The 3D model export module is used to render the 3D model of the front-end page using snapshot technology after selecting a viewpoint, obtain the rendering result, convert the rendering result into an image, and export it to the PPT. The decorative chart element export module is used to render the decorative chart elements of the front-end page using delayed rendering technology, and after rendering, to capture the image of the corresponding area and export the captured image to the PPT. The 3D model export module includes: A scene parameter acquisition unit is used to acquire scene parameters corresponding to a target viewpoint; the target viewpoint is the viewpoint obtained by the user by rotating or scaling the 3D model; the scene parameters include the position of the 3D model and the camera angle. The rendering unit is used to trigger a rendering operation based on the scene parameters after receiving the export instruction, and obtain the rendering result of the three-dimensional model from the target viewpoint. The format conversion unit is used to extract the rendering result from the rendering carrier and convert it into a bitmap format image; The 3D model export unit is used to export the bitmap format image to the PPT through the image insertion interface of the slide generation tool; The decorative chart element export module includes: The positioning unit is used to locate the specified document object model area where the decorative chart element is located, and to determine the area to be screenshotted. The rendering unit is used to initiate the animation frame request mechanism. By delaying for at least two frames, it ensures that the animation effects and complex styles of the decorative chart elements in the area to be captured are fully rendered. The first frame is used to trigger the chart update, and the second frame is used to ensure that all animations have finished executing and stabilized. The screenshot unit is used to call the front-end screenshot tool to take a screenshot of the area to be screenshotted after rendering is completed, and generate a bitmap format image containing the complete visual style; The decorative chart element export unit is used to export the bitmap format image to the PPT through the image insertion interface of the slide generation tool; Also includes: When exporting using the native interface, the structured presentation of the content is achieved by explicitly defining text and component styles through the API; the component styles include font, font size, color, alignment, indentation, and spacing.

6. A PPT export device based on HTML pages, characterized in that, include: Memory, used to store computer programs; A processor, configured to implement the HTML-based PPT export method as described in any one of claims 1 to 4 when executing the computer program.

7. A medium, characterized in that, The medium stores computer-executable instructions, which, when loaded and executed by a processor, implement the PPT export method based on HTML pages as described in any one of claims 1 to 4.

Images