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

    1.0.7 • Public • Published

    pdfmakejsx

    Create the document definition for pdfmake using JSX.

    Usage

    npm install pdfmakejsx
    

    Convert JSX to JS

    If you are using typescript, tsconfig.json needs compilerOptions.jsx to be set to react.

    You can also add compilerOptions.jsxFactory with h (default is React.createElement) to tell typescript how to interpret TSX files. This is not recommended if you use other JSX libraries in the same codebase. To set the JSX pragma on a file to file basis add /** @jsx h */ at the top of each JSX file.

    /** @jsx h */
    import { h } from 'pdfmakejsx'

    With a defined jsxFactory, just importing h is enough.

    If you are using Babel, set the pragma option as explained here.

    Example

    • pdf.tsx
    import { h } from 'pdfmakejsx'
     
    export default (title: string) =>
      <pdf pageOrientation="landscape" pageSize="A4">
        <content>
          <text fontSize={20} bold={true}>{ title }</text>
        </content>
      </pdf>
    • try.ts
    import { toDocumentDefinition } from 'pdfmakejsx'
    import pdf from './pdf.tsx'
     
    const page = pdf('Hello')
    console.log(toDocumentDefinition(page))

    npx ts-node try.ts logs

    {
      "pageOrientation": "landscape",
      "pageSize": "A4",
      "content": [
        {
          "text": [
            "Hello"
          ],
          "fontSize": 20,
          "bold": true
        }
      ]
    }

    This is a document definition that can be passed to pdfmake.

    pdfmakejsx does not include pdfmake, you will have to install that separately.

    Base elements

    <pdf> has to be the parent element. It takes only 3 direct children: <content>, <header> and <footer>, any other will be ignored.

    The base elements, such as <text> above, are as close as possible to the pdfmake specs. It is highly recommended to use typescript to let your IDE and compiler tell you which elements and properties are allowed.

    However some elements differ slightly form the document definition specs:

    • A required src property has been added to <image>
    <image src="image.png" width={100}/>

    becomes

    {
      "image": "image.png",
      "width": 100
    }
    • Tables have <row> elements
    <table widths={[200, '*']}>
      <row>
        <text bold={true}>A</text>
        <text bold={true}>B</text>
      </row>
      <row>
        <text>1</text>
        <text>2</text>
      </row>
    </table>

    becomes

    {
    "table": {
      "body": [
        [
          {"text": ["A"],"bold": true},
          {"text": ["B"],"bold": true}
        ],
        [
          {"text": ["1"]},
          {"text": ["2"]}
        ]
      ],
      "widths": [200,"*"]
    }
    • <canvas> has its own internal elements

    <line>, <rect>, <polyline> and <ellipse> will be ignored if used outside of canvas. So will any other elements inside the canvas.

    <canvas>
      <line x1={0} x2={300} y1={0} y2={300} />
      <rect x={100} y={200} w={300} h={50} color="blue"/>
      <polyline points={[{x: 100, y: 0}, { x: 350, y: 0 }, { x: 300, y: 300 }]} closePath={true} color="green" />
      <ellipse x={200} y={200} r1={100} r2={50} color="red" />
      <text>Will be ignored</text>
    </canvas>

    becomes

    {
      "canvas":[
        {"type":"line","x1":0,"x2":300,"y1":0,"y2":300},
        {"type":"rect","x":100,"y":200,"w":300,"h":50,"color":"blue"},
        {"type":"polyline","points":[{"x":100,"y":0},{"x":350,"y":0},{"x":300,"y":300}],"closePath":true,"color":"green"},
        {"type":"ellipse","x":200,"y":200,"r1":100,"r2":50,"color":"red"}
      ]
    }

    Install

    npm i pdfmakejsx

    DownloadsWeekly Downloads

    71

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    29 kB

    Total Files

    17

    Last publish

    Collaborators

    • idris-maps