BBC's guide to development
  • General

    • About
    • Tools
    • Git(hub)
    • Showpad
    • Hosting
    • Maintenance
    • Security
    • Go live checklist
  • Front-end development

    • Bundlers
    • CSS/SCSS
    • Javascript
    • Vue
    • PHP
    • Mails
    • Dev Faq
  • Functions
  • Mixins
  • General

    • OOP Structure
  • Component Classes

    • Accordion
    • App
    • Component
    • HighwayApp
    • Popup
    • PNG Sequencer
    • Tab
  • Manager Classes

    • BountListenerMgr
    • Cache
    • Configuration
    • InViewStateMgr
    • Instance Manager
    • Event dispatcher
  • Factories

    • SwiperFactory
  • PDF

    • AssetLoader
    • BasePdfDoc
    • TemplatePdfDoc
    • CustomPdfDoc
  • Utility functions

    • canvas
    • Connection Status
    • css
    • dev
    • placeholder
    • dom
    • fetch
    • json
    • object
    • scroll
    • scrollbar
    • spreadsheets
    • string
    • url
  • General

    • ComponentMgr
    • ThreeJsViewer
  • Components

    • ComponentMgr
    • GltfModel
    • Snappable
    • Socket
    • ThreeJsViewer
    • ThreeJsViewerCamera
  • Loaders

    • ConfigurationSerializer
    • GltfBlockParser
  • Utils

    • CanvasInputAdapter
    • CollisionManager
    • SocketGridExpander
    • blender
    • headless
  • General

    • Troubleshooting
    • Legacy
  • Components

    • AssetBar
    • ConfigGenerator
    • ShowpadApp
  • Managers

    • Assets
    • AppsDb
    • Config
  • Utils

    • Connection Status
    • general
    • showpad-interactive
    • showpad-upload
  • Components

    • Accordion
    • BackButton
    • Breadcrumb
    • ByltButton
    • Hamburger
    • Icon
    • Logo
    • Loader
    • Modal
    • Popup
    • Prompt
    • ProgressBar
    • TextLoader
  • Composables

    • useDebugMode
    • useConnectionStatus
  • Utils

    • dom
    • props
  • General

    • General
    • Tracking
  • Components

    • Accordion
    • ActionButton
    • AssetItem
    • AssetList
    • BackButton
    • ConfigGenButton
    • Logo
    • Media
    • Modal
    • Popup
    • Prompt
    • SPButton
    • SPRouterView
    • SPTrackedRouterLink
    • TextLoader
    • View
  • Composables

    • useConnectionStatus
  • Stores

    • useAppsDbStore
    • useBreadcrumbStore
    • useShowpadAPIStore
    • useShowpadSDKStore
    • useSpConfigStore
    • useSpStore
    • useSpTrackingStore
  • The New Kit

    • General
    • Installation & Usage
    • ACF Blocks
    • PHPCS
    • Functions
    • Vite
    • WP Config
    • Staging Deployment
  • Best Practices

    • Page Structure
    • Fonts/Typography
  • Todo
GitHub
  • General

    • About
    • Tools
    • Git(hub)
    • Showpad
    • Hosting
    • Maintenance
    • Security
    • Go live checklist
  • Front-end development

    • Bundlers
    • CSS/SCSS
    • Javascript
    • Vue
    • PHP
    • Mails
    • Dev Faq
  • Functions
  • Mixins
  • General

    • OOP Structure
  • Component Classes

    • Accordion
    • App
    • Component
    • HighwayApp
    • Popup
    • PNG Sequencer
    • Tab
  • Manager Classes

    • BountListenerMgr
    • Cache
    • Configuration
    • InViewStateMgr
    • Instance Manager
    • Event dispatcher
  • Factories

    • SwiperFactory
  • PDF

    • AssetLoader
    • BasePdfDoc
    • TemplatePdfDoc
    • CustomPdfDoc
  • Utility functions

    • canvas
    • Connection Status
    • css
    • dev
    • placeholder
    • dom
    • fetch
    • json
    • object
    • scroll
    • scrollbar
    • spreadsheets
    • string
    • url
  • General

    • ComponentMgr
    • ThreeJsViewer
  • Components

    • ComponentMgr
    • GltfModel
    • Snappable
    • Socket
    • ThreeJsViewer
    • ThreeJsViewerCamera
  • Loaders

    • ConfigurationSerializer
    • GltfBlockParser
  • Utils

    • CanvasInputAdapter
    • CollisionManager
    • SocketGridExpander
    • blender
    • headless
  • General

    • Troubleshooting
    • Legacy
  • Components

    • AssetBar
    • ConfigGenerator
    • ShowpadApp
  • Managers

    • Assets
    • AppsDb
    • Config
  • Utils

    • Connection Status
    • general
    • showpad-interactive
    • showpad-upload
  • Components

    • Accordion
    • BackButton
    • Breadcrumb
    • ByltButton
    • Hamburger
    • Icon
    • Logo
    • Loader
    • Modal
    • Popup
    • Prompt
    • ProgressBar
    • TextLoader
  • Composables

    • useDebugMode
    • useConnectionStatus
  • Utils

    • dom
    • props
  • General

    • General
    • Tracking
  • Components

    • Accordion
    • ActionButton
    • AssetItem
    • AssetList
    • BackButton
    • ConfigGenButton
    • Logo
    • Media
    • Modal
    • Popup
    • Prompt
    • SPButton
    • SPRouterView
    • SPTrackedRouterLink
    • TextLoader
    • View
  • Composables

    • useConnectionStatus
  • Stores

    • useAppsDbStore
    • useBreadcrumbStore
    • useShowpadAPIStore
    • useShowpadSDKStore
    • useSpConfigStore
    • useSpStore
    • useSpTrackingStore
  • The New Kit

    • General
    • Installation & Usage
    • ACF Blocks
    • PHPCS
    • Functions
    • Vite
    • WP Config
    • Staging Deployment
  • Best Practices

    • Page Structure
    • Fonts/Typography
  • Todo
GitHub
  • TemplatePdfDoc

TemplatePdfDoc

import TemplatePdfDoc from '@bbc/front-end-kit/js/pdf/templates/TemplatePdfDoc';

A project-level PDF template that extends BasePdfDoc. Sets opinionated defaults (A4 size, 60px page margins, a BBC colour palette) and wires up an automatic footer() call on every new page. Intended to be extended — not used directly.

Extends BasePdfDoc.

Getting started

Extend TemplatePdfDoc to create a document-specific class:

import TemplatePdfDoc from '@bbc/front-end-kit/js/pdf/templates/TemplatePdfDoc';

class OfferPdf extends TemplatePdfDoc {

    async init() {
        await super.init(); // loads fonts/images, sets PDF meta from Showpad user

        // load additional project-specific assets here
    }

    footer(data) {
        // called automatically on every pageAdded event
        // render footer content using this.page, this._colors, etc.
    }

    async generate(args) {
        this.data = args.data;

        this
            .addPage()
            .font(this._assetLoader.getFontFile('custom-font-regular'))
            .fontSize(12)
            .text(args.data.title, this.pageMargins, this.pageMargins);

        return super.generate(args);
    }
}

API

constructor(args = {})

Initialises the TemplatePdfDoc instance. Defaults size to 'A4' (via defaultsDeep) and forwards all args to BasePdfDoc.

Sets the following properties automatically:

  • pageMargins → 60
  • _colors → BBC colour palette object (see below)
  • Registers a pageAdded listener that calls this.footer(this.data) on every new page.

Methods

init()

Async setup hook — override in subclasses and call super.init() to inherit base behaviour. The base implementation:

  1. Sets PDF metadata (info.Title, info.Author, info.Subject) using window.ShowpadLib.getUserInfo().
  2. Calls this._assetLoader.loadFonts([]) and this._assetLoader.loadImages([]) — the arrays are empty by default, populate them in subclass overrides.

Warning

init() calls window.ShowpadLib.getUserInfo() directly. This requires the Showpad environment to be present at runtime. If you're using TemplatePdfDoc outside Showpad, override init() and skip super.init() or set this.info.* manually.

footer(data)

Called automatically on every pageAdded event. Not implemented in the base class — override in subclasses to render a footer on every page.

Getters & Setters

contentWidth

Returns the usable page width after subtracting both margins:

this.page.width - (this.pageMargins * 2)

Colours

this._colors provides a BBC colour palette:

KeyValue
blue#00B0CA
white#fff
lightGrey#e4e4e4
grey#969899
black#2E3233

External dependencies

  • BasePdfDoc: Parent class providing PDFKit integration and asset loading.
  • lodash-es defaultsDeep: Merges 'A4' default size over caller args.
  • window.ShowpadLib: Required by init() to fetch the current user's name.
Edit this page
Last Updated: 4/27/26, 12:56 PM
Contributors: Nicolas Jaenen