Integrate PDF and HTML Document Report Items into the React Bold Reports Designer

Bold Reports extensions let you add powerful PDF and HTML Document report items to your React Report Designer application. These items enable you to embed and render content from PDF files or HTML markup directly within reports. This is useful for incorporating external documents, dynamic web content, or formatted text.

Steps to Integrate PDF and HTML Document Report Items

Step 1: Install the Extensions Package

Run this following command in your project directory:

npm install @boldreports/javascript-reporting-extensions

Step 2: Import Styles and Scripts in App.js

Import the shared stylesheet and the required report item modules:

import '@boldreports/javascript-reporting-extensions/document.reportitem.css';

import { EJPdfDocument } from '@boldreports/javascript-reporting-extensions/pdfdocument.reportitem';
import { EJHtmlDocument } from '@boldreports/javascript-reporting-extensions/htmldocument.reportitem';

Step 3: Export Classes from Extension Files

Navigate to node_modules/@boldreports/javascript-reporting-extensions and edit these files:

• In pdfdocument.reportitem.js, add the following line at the end of the file:

  export { EJPdfDocument };
  

• In htmldocument.reportitem.js, add the following line at the end of the file:

  export { EJHtmlDocument };
  

Step 4: Register Extensions Globally in App.js

Make the classes available globally:

window['EJPdfDocument'] = EJPdfDocument;
window['EJHtmlDocument'] = EJHtmlDocument;

Step 5: Configure Report Item Extensions in the Designer Component

Update your <BoldReportDesignerComponent> with the extensions array:

<BoldReportDesignerComponent
  id="reportdesigner_container"
  serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'}
  reportItemExtensions={[
    {
      name: 'pdfdocument',
      className: 'EJPdfDocument',
      imageClass: 'customitem-pdfdocument',
      displayName: 'PDF',
      category: 'Documents',
      toolTip: {
        requirements: 'Add a report item to the designer area.',
        description: 'Display the pdf document content in the report',
        title: 'PDF'
      },
      allowHeaderFooter: false
    },
    {
      name: 'htmldocument',
      className: 'EJHtmlDocument',
      imageClass: 'customitem-htmldocument',
      displayName: 'Html',
      category: 'Documents',
      toolTip: {
        requirements: 'Add a report item to the designer area.',
        description: 'This report item used to process the html markup text and url',
        title: 'Html'
      },
      allowHeaderFooter: false
    }
  ]}>
</BoldReportDesignerComponent>

Preview

The PDF and HTML document items now appear under the Documents category in the report item panel.

• Sample Application: Download the complete sample application for reference.

Conclusion

Integrating PDF and HTML document report items enhances the React Bold Reports Designer by enabling seamless inclusion of external documents and rich HTML content within reports.

Related Articles

• How to Customize Report Designer Widgets in Bold Reports Designer Application in React