printical
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

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>;

Package Sidebar

Install

npm i printical

Weekly Downloads

1

Version

0.0.1

License

MIT

Unpacked Size

29.8 kB

Total Files

8

Last publish

Collaborators

  • norassys