PDF Print Component 🖨️ Printical

This is a simple component to print or download pdf from a react component.

• ✅ Typescript
• ✅ Fully customizable
• 😞 ReactJS only

Install

npm install printical

pnpm add printical

yarn add printical

Usage

import Printical from "printical";

const Demo = () => {
  return (
    <Printical
      trigger={({ download }) => <button onClick={download}>⏬</button>}
    >
      // ... your component/s
    </Printical>
  );
};

// OR

import { usePrintical } from "printical";

const Demo = () => {
  const { print, download, Printical } = usePrintical(opts);

  return (
    <>
      <button onClick={print}>🖨️</button>
      <button onClick={download}>⏬</button>
      <Printical>{// ... your component/s}</Printical>
    </>
  );
};

Interface

type TriggerArgs = {
  print: () => void;
  download: () => void;
  downloading: boolean;
  custom: () => void;
};
type TriggerFunction = (args: TriggerArgs) => JSX.Element;

/// https://github.com/eKoopmans/html2pdf.js
type PDFOptions = {
  /**
   * PDF margin (in jsPDF units). Can be a single number, [vMargin, hMargin], or [top, left, bottom, right].
   */
  margin?: number | [number, number, number, number];
  filename?: string;
  /**
   * Controls the pagebreak behavior on the page. See Page-breaks below.
   * https://ekoopmans.github.io/html2pdf.js/#page-breaks
   */
  pagebreak?: {
    mode?: ("avoid-all" | "css" | "legacy")[];
    before?: string | string[];
    after?: string | string[];
    avoid?: string | string[];
  };
  image?: {
    type: "jpeg" | "png" | "webp";
    /**
     * The quality of the image. Only applies to JPEG images.
     * 0 is the lowest quality, 1 is the highest quality.
     */
    quality: number;
  };
  enableLinks?: boolean;
  /**
   * Configuration options sent directly to html2canvas (see here for usage).
   * https://html2canvas.hertzen.com/configuration
   */
  html2canvas?: {
    allowTaint?: boolean;
    backgroundColor?: string;
    canvas?: HTMLCanvasElement | null;
    foreignObjectRendering?: boolean;
    imageTimeout?: number;
    ignoreElements?: (element: HTMLElement) => boolean;
    logging?: boolean;
    onclone?: ((document: Document) => void) | null;
    proxy?: string | null;
    removeContainer?: boolean;
    scale?: Window["devicePixelRatio"];
    useCORS?: boolean;
    width?: HTMLCanvasElement["width"];
    height?: HTMLCanvasElement["height"];
    x?: HTMLCanvasElement["offsetLeft"];
    y?: HTMLCanvasElement["offsetTop"];
    scrollX?: Element["scrollLeft"];
    scrollY?: Element["scrollTop"];
    windowWidth?: Window["innerWidth"];
    windowHeight?: Window["innerHeight"];
  };
  /**
   * Configuration options sent directly to jsPDF (see here for usage)
   * https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
   */
  jsPDF?: {
    orientation?: "portrait" | "landscape";
    unit?: "pt" | "mm" | "cm" | "in" | "px" | "pc" | "em" | "ex";
    format?:
      | "a0" - "a10"
      | "b0" - "b10"
      | "c0" - "c10"
      | "d1"
      | "letter"
      | "government-letter"
      | "legal"
      | "junior-legal"
      | "ledger"
      | "tabloid"
      | "credit-card"
      | [number, number];
    putOnlyUsedFonts?: boolean;
    compress?: boolean;
    precision?: number;
    userUnit?: number;
    hotfixes?: string[];
    encryption?: {
      userPassword?: string;
      ownerPassword?: string;
      userPermissions?: ("print" | "modify" | "copy" | "annot-forms")[];
    };
    floatPrecision?: number;
  };
};

// https://github.com/gregnb/react-to-print
type IReactToPrintProps = {
    /** Class to pass to the print window body */
    bodyClass?: string;
    children?: React.ReactNode;
    /** Content to be printed */
    content: () => React.ReactInstance | null;
    /** Copy styles over into print window. default: true */
    copyStyles?: boolean;
    /** Set the title for printing when saving as a file */
    documentTitle?: string;
    /** */
    fonts?: Font[];
    /** Callback function to trigger after print */
    onAfterPrint?: () => void;
    /** Callback function to trigger before page content is retrieved for printing */
    onBeforeGetContent?: () => void | Promise<any>;
    /** Callback function to trigger before print */
    onBeforePrint?: () => void | Promise<any>;
    /** Callback function to listen for printing errors */
    onPrintError?: (errorLocation: "onBeforeGetContent" | "onBeforePrint" | "print", error: Error) => void;
    /** Override default print window styling */
    pageStyle?: string | PropertyFunction<string>;
    /** Override the default `window.print` method that is used for printing */
    print?: (target: HTMLIFrameElement) => Promise<any>;
    /** Remove the iframe after printing. */
    removeAfterPrint?: boolean;
    /** Suppress error messages */
    suppressErrors?: boolean;
    /** Trigger action used to open browser print */
    trigger?: <T>() => React.ReactElement<ITriggerProps<T>>;
    /** Set the nonce attribute for whitelisting script and style -elements for CSP (content security policy) */
    nonce?: string;
}

Props

Printical

| Name | Type | Required | Description | | ------------- | -------------------- | -------- | ------------------------------------ | | children | JSX.Element | true | The component/s to print | | trigger | TriggerFunction | false | The trigger to print or generate pdf | | pdfOptions | PDFOptions | false | The options to generate the pdf | | customPrint | IReactToPrintProps | false | The options to print the html |

usePrintical

| Name | Type | Required | Description | | ------------- | -------------------- | -------- | ------------------------------- | | pdfOptions | PDFOptions | false | The options to generate the pdf | | customPrint | IReactToPrintProps | false | The options to print the html |

Notes

• when using customPrint option, a custom trigger is available to use in the trigger prop

const { custom } = usePrintical({ customPrint: { ... } });

<Printical customPrint={...} trigger={({ custom }) => {}} ... />

const { custom, Printical } = usePrintical({
  customPrint: { pageStyle: "..." },
});

<button onClick={custom}>✨</button>;