Print settings

@react-form-builder/components-print

Introduction

PrintSettings is the header and footer that print in the page margins. Nothing shows on screen in the viewer. In the designer it lives in the non-visual bar and in the tree, under Non-visual. A form can hold only one.

Print in the main menu, or Ctrl/Cmd+P, switches to the viewer and calls window.print(). Add the print components to the view when the form JSON contains PrintSettings.

Installation

npm install @react-form-builder/components-print

Connection to FormBuilder component

Register the print components next to RSuite so Print settings shows up in the component panel:

import {rSuiteComponents, rSuiteComponentsDescriptions} from '@react-form-builder/components-rsuite'
import {printComponents, printComponentsDescriptions} from '@react-form-builder/components-print'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'

const components = [
  ...rSuiteComponents.map((c) => c.build()),
  ...printComponents.map((c) => c.build()),
]
const builderView = new BuilderView(components)
  .withComponentLibraryDescription(rSuiteComponentsDescriptions)
  .withComponentLibraryDescription(printComponentsDescriptions)

function App() {
  return <FormBuilder view={builderView}/>
}

Connect to FormViewer component

Pass printModels into createView. Call window.print(), or use Print in the designer:

import {printModels} from '@react-form-builder/components-print'
import {models} from '@react-form-builder/components-rsuite'
import {createView, FormViewer} from '@react-form-builder/core'

const view = createView([...models, ...printModels])

const form = `{
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "printSettings",
        "type": "PrintSettings",
        "props": {
          "header": { "value": "Inspection report" },
          "footer": { "value": "Page {page} of {pages}" },
          "footerAlign": { "value": "end" }
        }
      }
    ]
  }
}`

function App() {
  return <FormViewer view={view} getForm={() => form}/>
}

{page} is the current page number. {pages} is the total. Page {page} of {pages} prints as "Page 1 of 3" on the first sheet.

Properties

Name	Type	Description
Header	string	Header text; {page} and {pages} for counters
Footer	string	Footer text; {page} and {pages} for counters
Header align	start | center | end	Header position in the margin (default center)
Footer align	start | center | end	Footer position in the margin (default center)

Bundles

The designer bundle and the viewer premium bundle already include this package. In a CDN embed where you assemble the component set yourself, read printComponent from the bundle global:

const {
  renderFormViewer,
  createView,
  rSuiteComponents,
  printComponent,
} = window.FormEngineViewerBundle

const models = [
  ...rSuiteComponents.models,
  ...printComponent.printModels,
]
const view = createView(models)