react-component-export-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    react-component-export-image

    Demo Codesandbox

    Introduction

    • Export component as jpeg, png or pdf
    • Each export expect a {React.RefObject} node, optional fileName, and optional html2CanvasOptions object which you wish to pass it to html2Canvas
    • exportComponentAsPDF also accepts an optional pdfOptions object with these optional fields {w, h, x, y, unit, orientation, pdfFormat}
    w = 100 (Width in pixels - defaults to the width of the element)
    
    h = 50 (Height in pixels - defaults to the height of the element)
    
    x = 0 (X Coordinate in pixels against left edge of the page - defaults to 0)
    
    y = 0 (Y Coordinate in pixels against left edge of the page - defaults to 0)
    
    unit = 'px' (Measurement unit (base unit) to be used when coordinates are specified.
    Possible values are "pt" (points), "mm", "cm", "m", "in" or "px". - defaults to 'mm')
        - if you are trying to get the pdf to fill up the exact space, try setting unit to "px"
    
    orientation = 'p' (portrait) OR 'l' (landscape) - defaults: 
        - landscape if width > height
         or 
        - portrait if height > width
    
    The format of the PDF. Can be:
    
        a0 - a10
        b0 - b10
        c0 - c10
        dl
        letter
        government-letter
        legal
        junior-legal
        ledger
        tabloid
        credit-card
    
        Default is "a4". If you want to use your own format just pass instead of one of the above predefined formats the size as an number-array, e.g. [595.28, 841.89]

    How to Upgrade

    The previous way of using an export looked like this:

    exportComponentAsJPEG(node, fileName, type, backgroundColor, options)

    The new way: pass node & an optional object with only the fields you need.

    • backgroundColor is no longer accepted in this main object, but is accepted in the "html2CanvasOptions" object, which is passed directly to html2canvas
    • type is no longer accepted - JPG will always produce JPG, PNG => PNG, PDF => PDF

    exportComponentAsJPEG(node, {fileName, html2CanvasOptions})

    • exportComponentAsPDF also accepts an additional pdfOptions object (see introduction)

    exportComponentAsPDF(node, {fileName, html2CanvasOptions, pdfOptions})

    Code Samples

    Component

    import { exportComponentAsJPEG, exportComponentAsPDF, exportComponentAsPNG } from 'react-component-export-image';
    import React from 'react';
    
    class ComponentToPrint extends React.Component {
     render() {
       return <div>Hello World</div>;
     }
    }
    export default class MyComponent extends React.Component {
     constructor(props) {
       super(props);
       this.componentRef = React.createRef();
     }
    
     render() {
       return (
         <React.Fragment>
           <ComponentToPrint ref={this.componentRef} />
           <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
             Export As JPEG
           </button>
           <button onClick={() => exportComponentAsPDF(this.componentRef)}>
             Export As PDF
           </button>
           <button onClick={() => exportComponentAsPNG(this.componentRef)}>
             Export As PNG
           </button>
         </React.Fragment>
       );
     }
    }

    Function component

    import { exportComponentAsJPEG, exportComponentAsPDF, exportComponentAsPNG } from 'react-component-export-image';
    import React, { useRef } from 'react';
    
    const ComponentToPrint = React.forwardRef((props, ref) => (
      <div ref={ref}>Hello World</div>
    ));
    
    const MyComponent = () => {
      const componentRef = useRef();
    
      return (
        <React.Fragment>
          <ComponentToPrint ref={componentRef} />
          <button onClick={() => exportComponentAsJPEG(componentRef)}>
            Export As JPEG
          </button>
          <button onClick={() => exportComponentAsPDF(componentRef)}>
            Export As PDF
          </button>
          <button onClick={() => exportComponentAsPNG(componentRef)}>
            Export As PNG
          </button>
        </React.Fragment>
      );
    };
    
    export default MyComponent;

    Installation

    npm i react-component-export-image
    or
    yarn add react-component-export-image

    Install

    npm i react-component-export-image

    DownloadsWeekly Downloads

    5,574

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    480 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar