Design and Implementation of a Custom Report Export Platform Using PptxGenJS, DVA, and React

Background: In B2B real‑estate scenarios, periodic reports are required, and manual creation is time‑consuming. A custom report export platform was built to generate PPTX reports from templates by selecting data sources, reducing effort to minutes.

Main features: Template editor with text, image, chart, field insertion and background changes; CRUD operations for templates; Export function that fills data into the template and generates a PPTX file.

Overall approach: The platform consists of two core modules: template editing and report export. Template editing is a web‑based PPT editor; report export combines the template with data.

Template editing: Users choose a layout, background, and insert content via a form. The canvas displays the current slide, and changes are reflected in real‑time on thumbnail and preview. Layout configuration screenshots are shown.

Data structure: Each slide stores layout , content , slideTitle , and background . Content modules contain type, details, style, image size, and chart metadata. An overall newReportTemplate object aggregates all slides.

Implementation details:

Canvas scaling uses CSS transform: scale(...) and the browser viewport size ( document.body.clientWidth , document.body.clientHeight ) to compute a uniform scale factor.

State management relies on dvajs (a lightweight wrapper around Redux and redux‑saga) to synchronize form data, canvas, and thumbnail components.

Slide ordering and drag‑and‑drop are handled by react-grid-layout with a single‑column grid, where the y coordinate determines slide order.

Report generation uses PptxGenJS . The code iterates over slideContents , creates a slide for each item, and calls the appropriate add... method (e.g., addText ) based on the module type .

Data embedding employs GraphQL to batch multiple data requests into a single query. Dictionaries map chart names to GraphQL fields and to the variables required for chart rendering.

Code examples:

.shrink {
  transform: scale(0.5);
}

/* Inline style example */
style={{ transform: `scale(${shrink})` }}

function getWindowWidth() {
  setWindowWidth(document.body.clientWidth - EDIT_AREA_WIDTH);
  setWindowHeight(document.body.clientHeight);
  setHeight(((document.body.clientWidth - EDIT_AREA_WIDTH) / 16) * 9); // 16/9 aspect ratio
}

const newReportTemplate = {
  layouts: Layout[],
  '0': {
    layout: frameLayouts,
    content: contentModules,
    slideTitle: titleItem,
    background: string,
  },
  '1': {
    layout: frameLayouts,
    content: contentModules,
    slideTitle: titleItem,
    background: string,
  },
};

After integrating the template, data, and charts, the platform can export a fully populated PPTX file in about one minute, dramatically improving reporting efficiency for real‑estate B2B customers.