• Stars
    star
    124
  • Rank 288,207 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Generate PDFs using JSX! 🎯

jsx-pdf logo

npm version Build Status Coverage Status

Generate modular PDFs via pdfmake using JSX.

import PDFMake from 'pdfmake';
import JsxPdf from 'jsx-pdf';
import { OpenSans } from './font-descriptors';

const pdfMake = new PDFMake({
  OpenSans,
});

const stream = pdfMake.createPdfKitDocument(
  JsxPdf.renderPdf(
    <document defaultStyle={{ font: 'OpenSans', fontSize: 12 }}>
      <content>This will appear in my PDF!</content>
    </document>,
  ),
);

// write the stream to a file; this could also be streamed to an HTTP connection, stdout etc
stream.on('end', () => console.log('PDF generated'));
stream.pipe(fs.createWriteStream('~/Desktop/test.pdf'));
stream.end();

Quick start

Javascript

  • yarn add jsx-pdf @babel/plugin-transform-react-jsx
  • Configure the part of your build that transpiles your JSX to use JsxPdf.createElement as the element factory.
    • For babel, add the configuration below to your .babelrc.
    "plugins": [
      [
        "@babel/plugin-transform-react-jsx",
        { "pragma": "JsxPdf.createElement", "pragmaFrag": "JsxPdf.Fragment" }
      ]
    ]

Typescript

  • yarn add -D @types/jsx-pdf
  • For TypeScript, add the configuration below to your tsconfig.json. Setting jsx to react configures TypeScript to handle JSX transpiling for you, and the jsxFactory option specifies the element factory to use. Setting jsxFragmentFactory allows you to use JSX Fragments.
"compilerOptions": {
  "jsx": "react",
  "jsxFactory": "JsxPdf.createElement",
  "jsxFragmentFactory": "JsxPdf.Fragment",
},
  • Code away! See the examples below.

You can also run our example script by running yarn demo and opening the generated pdf at example/example.pdf. Check the console logs for additional information.

Components

Similar to modern front-end frameworks, you can define your own components using declarative syntax.

Basic example:

import JsxPdf from 'jsx-pdf';

const Greeting = ({ name }) => <text>Hello, {name}!</text>;

const doc = (
  <document>
    <content>
      <Greeting name="Bob" />
    </content>
  </document>
);

List example:

import JsxPdf from 'jsx-pdf';

const GroupGreeting = ({ names }) => (
  <>
    {names.map((name) => (
      <Greeting name={name} />
    ))}
  </>
);

const doc = (
  <document>
    <content>
      <GroupGreeting names={['Bob', 'Alice']} />
    </content>
  </document>
);

Inline If example:

import JsxPdf from 'jsx-pdf';

const Signature = () => <text>JSX-PDF, Inc.</text>;

const SignedGreeting = ({ name }) => (
  <>
    {name && <Greeting name={name} />}
    <Signature />
  </>
);

const doc = (
  <document>
    <content>
      <SignedGreeting />
    </content>
  </document>
);

Inline If-Else example:

import JsxPdf from 'jsx-pdf';

const AnonymousGreeting = () => <text>We don't know you.</text>;

const SignedGreeting = ({ name }) => (
  <>
    {name ? <Greeting name={name} /> : <AnonymousGreeting />}
    <Signature />
  </>
);

const doc = (
  <document>
    <content>
      <SignedGreeting />
    </content>
  </document>
);

Element variable example:

import JsxPdf from 'jsx-pdf';

const SignedGreeting = ({ name }) => {
  let greeting;

  if (name) {
    greeting = <Greeting name={name} />;
  } else {
    greeting = <AnonymousGreeting />;
  }

  return (
    <>
      {greeting}
      <Signature />
    </>
  );
};

const doc = (
  <document>
    <content>
      <SignedGreeting />
    </content>
  </document>
);

Styling

Styling can be done by adding appropriate attributes to tags. It's often helpful for readability to group style-related attributes together and use the spread syntax.

import JsxPdf from 'jsx-pdf';

const Greeting = ({ name }) => {
  const styles = {
    italics: true,
    fontSize: 10,
  };

  return <text {...styles}>Hello, {name}!</text>;
};

const doc = (
  <document>
    <content>
      <Greeting name="Bob" />
    </content>
  </document>
);

Context

Each component has access to global context and can update it if necessary.

import JsxPdf from 'jsx-pdf';

const AllowedUsersProvider = (attributes, context, updateContext) => {
  updateContext({
    allowedUsers: ['Alice'],
  });

  return attributes.children[0];
};

const SecureGreeting = ({ name }, { allowedUsers }) =>
  allowedUsers.includes(name) ? (
    <text>Hello, {name}!</text>
  ) : (
    <text>You are not allowed.</text>
  );

const doc = (
  <AllowedUsersProvider>
    <document>
      <content>
        <SecureGreeting name="Bob" />
      </content>
    </document>
  </AllowedUsersProvider>
);

Document primitives

This section describes basic elements provided by the library. More information about supported attributes and advanced examples can be found here.

Top elements

Each document has to be enclosed within document tag with nested content, and optional header and footer. The document is the place for configuration that affects the whole PDF, such as page margins, page size, default style, and metadata.

import JsxPdf from 'jsx-pdf';

const doc = (
  <document
    pageMargins={[20, 20, 20, 20]}
    pageSize="A4"
    defaultStyle={{
      font: 'OpenSans',
    }}
    info={{
      author: 'Buzz Lightyear',
    }}
  >
    <header>Greeting</header>
    <content>Hello, Bob!</content>
    <footer>JSX-PDF, Inc.</footer>
  </document>
);

Dynamic Header and Footer

If you want to use the dynamic header functionality in pdfmake, simply pass a render function as the only child of the header or footer:

const doc = (
  <document>
    <header>
      {(currentPage, pageCount) => (
        <text>
          Page {currentPage} of {pageCount}.
        </text>
      )}
    </header>
    <content>{/* ... */}</content>
  </document>
);

The parameters are:

  • currentPage - the 1-indexed page for which the content is being rendered
  • pageCount - the total number of pages in the document
  • pageSize - an object containing information about the dimensions of the page.

Paragraphs

Paragraphs are defined using text tag.

import JsxPdf from 'jsx-pdf';

const doc = (
  <document>
    <content>
      <text>
        This sentence will be rendered as one paragraph,

        even though there are

        line


        breaks.
      </text>
      <text>This is another paragraph.</text>
    </content>
  </document>
);

In order to apply styling to a group of paragraphs, they can be wrapped with a stack tag.

import JsxPdf from 'jsx-pdf';

const doc = (
  <document>
    <content>
      <stack color="red">
        <text>First red paragraph.</text>
        <text>Second red paragraph.</text>
      </stack>
      <text color="blue">Blue parahraph.</text>
    </content>
  </document>
);

Columns

Elements nested in columns tag will be stacked horizontally.

import JsxPdf from 'jsx-pdf';

const doc = (
  <document>
    <content>
      <columns columnGap={10}>
        <column width={100}>Fixed width column</column>
        <column width="10%">Percentage width column</column>
        <column width="auto">
          Column that adjusts width based on the content
        </column>
        <column width="*">Column that fills the remaining space</column>
      </columns>
    </content>
  </document>
);

Lists

Both ordered and unordered lists are supported.

import JsxPdf from 'jsx-pdf';

const docWithOrderedList = (
  <document>
    <content>
      <ol reversed start={10} separator={['(', ')']} type="lower-roman">
        <text>Item 1</text>
        <text>Item 2</text>
        <text>Item 3</text>
      </ol>
    </content>
  </document>
);

const docWithUnorderedList = (
  <document>
    <content>
      <ul color="blue" markerColor="red" type="square">
        <text>Item 1</text>
        <text>Item 2</text>
        <text>Item 3</text>
      </ul>
    </content>
  </document>
);

Tables

table tag provides a simple way of creating table layouts.

const leftCellStyle = {
  color: 'grey',
};

const doc = (
  <document>
    <content>
      <table widths={[100, '*', 'auto']} headerRows={1} layout="headerLineOnly">
        <row>
          <cell>Fixed width column</cell>
          <cell>Column that fills the remaining space</cell>
          <cell>Column that adjusts width based on the content</cell>
        </row>
        <row>
          <cell {...leftCellStyle}>Cell 1.1</cell>
          <cell>Cell 1.2</cell>
          <cell>Cell 1.3</cell>
        </row>
        <row>
          <cell {...leftCellStyle}>Cell 2.1</cell>
          <cell>Cell 2.2</cell>
          <cell>Cell 2.3</cell>
        </row>
      </table>
    </content>
  </document>
);

Images

image supports JPEG and PNG formats.

import JsxPdf from 'jsx-pdf';

const doc = (
  <document>
    <content>
      <image src="/home/bob/photos/Bob.png" width={150} height={150} />
    </content>
  </document>
);

SVGs

The svg tag can be used to render SVG images. The width, height and fill attributes can be used to control the size of the image as described in the pdfmake docs.

import JsxPdf from 'jsx-pdf';

const doc = (
  <document>
    <content>
      <svg
        content={`
          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <circle fill="red" cx="50" cy="50" r="50"/>
          </svg>
        `}
      />
    </content>
  </document>
);

QR Codes

The qr tag can be used to render QR codes. There are various options available as described in the pdfmake docs.

import JsxPdf from 'jsx-pdf';

const doc = (
  <document>
    <content>
      <qr content="My text" />
    </content>
  </document>
);

API

renderPdf

Accepts JSX and returns a PDF JSON representation in the format expected by pdfmake.

createElement

This function converts JSX to object representation. Every time JSX syntax is used, the function has to be made available. The functionality depends on the babel plugin @babel/plugin-transform-react-jsx (or equivalent), and Babel must be set up in the project in order to transpile the JSX correctly.

Example .babelrc file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      { "pragma": "JsxPdf.createElement", "pragmaFrag": "JsxPdf.Fragment" }
    ]
  ]
}

Disclaimer

Copyright 2018 Schibsted

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

License

By contributing to this project, you agree that your contributions will be licensed under its MIT license.

More Repositories

1

WAAS

Whisper as a Service (GUI and API with queuing for OpenAI Whisper)
JavaScript
1,802
star
2

jslt

JSON query and transformation language
Java
612
star
3

strongbox

A secret manager for AWS
Java
239
star
4

tweet_ui

Flutter package to display tweets from a Twitter API JSON (v1 or v2) on Android and iOS. Support for Tweets with 1-4 photos, Video, GIFs, hashtags, mentions, symbols, urls, quoted Tweets and retweets.
Dart
79
star
5

schibsted-grotesk

The Schibsted Grotesk font
Python
57
star
6

mesoscope

Local Mesos cluster running on top of docker for learning/testing purposes
Shell
34
star
7

meeting-concluder

Record audio from a meeting, then transcribe, conclude and send the conclusion and a piece of advice to Slack
Go
29
star
8

artishock

A tool to investigate Dependency Confusion in Artifactory
Java
23
star
9

triathlon

Java
20
star
10

github-actions-self-hosted-cdk

TypeScript
20
star
11

aws-cost-monitoring

AWS Cost Monitoring terraform module
HCL
17
star
12

ai-academy

A repository for the schibsted ai academy
16
star
13

account-sdk-browser

Schibsted Account SDK for browsers
JavaScript
16
star
14

account-sdk-android

⛔️ DEPRECATED Schibsted Account SDK for Android
Kotlin
14
star
15

node-token-introspection

Library to introspect token of service following RFC-7662
JavaScript
13
star
16

mesos2iam

Provide IAM credentials to containers running inside a mesos cluster based on environment variable of the container
Go
9
star
17

tests

The tests we give to people we want to work with
JavaScript
9
star
18

eslint-config-schibsted

eslint configurations from Schibsted engineers
JavaScript
9
star
19

deathstar

Because a little chaos is good for you.
TypeScript
8
star
20

sdk-js

SPiD SDK Client for Javascript
JavaScript
7
star
21

sdk-php

SPiD SDK Client for PHP
PHP
6
star
22

account-sdk-ios

⛔️ DEPRECATED SchibstedAccount SDK for iOS
Swift
6
star
23

spid-tech-docs

Technical documentation for the Schibsted account platform
Clojure
6
star
24

pr_changelog

A script to generate a nice list of changes given two git references.
Ruby
6
star
25

sdk-android

SPiD SDK Client for Android. DEPRECATED: This is deprecated and will not be supported after May 2018. Please refer to https://github.com/schibsted/account-sdk-android instead
Java
6
star
26

next-gen

Next Generation Products
5
star
27

middy-error-handler

Error handler middleware that returns JSON response
JavaScript
5
star
28

krakend-ratelimit

krakend rate limiter
Go
5
star
29

dockermaze-reloaded

It’s year BD5. The Dockerbot is your only hope of survival in an unknown world. Will you be able to fix it in time?
Go
4
star
30

bigip-to-terraform

Transform running f5 bigip configuration to terraform resources
Python
4
star
31

libvmod-hashids

https://hashids.org/ support for Varnish
C
4
star
32

sdk-example

An example demonstrating usage of SDKs
JavaScript
4
star
33

spid-client-java

Lightweight client for the SPiD API
Java
4
star
34

udp-pipe

Reads UDP packages and forwards to different targets
JavaScript
4
star
35

serverless-slack-deploy-notification

Plugin that sends a slack message on deployment start and finish
JavaScript
4
star
36

sdk-java-event-tracking

Java
3
star
37

SPiDSDK

SPiD SDK Client for iOS
Objective-C
3
star
38

sdk-js-event-tracking-contrib

Automatic tracking layer for the js sdk.
JavaScript
3
star
39

sum

Sum, a powerful tool for enhancing your articles with the help of ChatGPT.
TypeScript
3
star
40

depstrive

Multi-tool for missing CI/CD features
JavaScript
3
star
41

googoo

Deploy review apps for your project using Serverless
JavaScript
3
star
42

spid-php-examples

Using the SPiD API: Working examples for PHP
PHP
3
star
43

deathstar-middleware

Node.js middleware for Deathstar, to create simulated outages
TypeScript
3
star
44

spid-clj-examples

Using the SPiD API: Working examples for Clojure
Clojure
3
star
45

gocd-s3-poller

Poll AWS S3 bucket and folder for files, and trigger pipeline in GoCD
Java
3
star
46

overloadimpact

Command line tool and framework for writing and running tests suites for loadimpact.com, with support for custom lua libraries.
Python
3
star
47

schibsted-account-chrome-extension

Let's you transfer the Schibsted Account cookie to your local projects with ease!
JavaScript
3
star
48

pingdom-status-page

A status page to show off your current and historical uptime from Pingdom
JavaScript
2
star
49

krakend-eureka

krakend eureka integration
Go
2
star
50

discord-news-bot

Stay updated with the latest headlines from VG directly in your Discord server!
TypeScript
2
star
51

chef-rest

Chef resource provider to do REST queries in recipes
Ruby
2
star
52

core-sdk-node

Core SDK for Identity and Payment
JavaScript
2
star
53

VG-Nyhets-Quiz

WIP
TypeScript
2
star
54

problematic

Random problem generator
CSS
2
star
55

account-sdk-flutter

Flutter plugin for Schibsted Account SDK
Kotlin
2
star
56

account-sdk-ios-web

Schibsted account SDK for iOS
Swift
2
star
57

smaug

A simple credentials provider for mesos2iam
Go
2
star
58

slack-calendar-topic

Set the topic of a Slack channel to the currently ongoing event in a Google calendar
JavaScript
2
star
59

sls-oncall-twilio

Call routing with Twilio and PagerDuty
JavaScript
2
star
60

ratpack-datadog

Java
2
star
61

ratpack-eureka

Java
2
star
62

krakend-cbreaker

krakend circuit breaker hystrix style implemetation
Go
2
star
63

spid-client-clojure

A very thin Clojure wrapper for the SPID Java SDK
Clojure
2
star
64

copyfield

Update fields in a PostgreSQL database with values from another column
Go
2
star
65

spid-sdk-client-node

Lightweight Node.js client for the SPiD API
JavaScript
1
star
66

spid-java-examples

Examples using the spid-client-java
Java
1
star
67

sls-oncall

Slack bot that fetches user oncall given a schedule in PagerDuty
JavaScript
1
star
68

middy-caching-headers

Add caching headers to the response e.g. Cache-Control, Surrogate-Control
JavaScript
1
star
69

express-api-formatter

Decorates express response with success/error functions
JavaScript
1
star
70

uka-workshop-2019

Kubernetes Workshop at UKA 2019
1
star
71

homebrew-strongbox

Homebrew recipes
Ruby
1
star
72

docker-postgres-tests

Docker images specialised for testing purposes
Go
1
star
73

tjejer-kodar-schibsted

The project for Schibsted's workshop for Tjejer Kodar at October 2018
JavaScript
1
star
74

middy-cors

Adds CORS headers to the response (success and error)
JavaScript
1
star
75

express-json-error-handler

Error handler for body-parser
JavaScript
1
star
76

configure-convox-racks

JavaScript
1
star
77

sdk-java

SPiD SDK Client for JAVA
Java
1
star
78

eslint-config-schibsted-react

ESLint configs for React.js from Schibsted
JavaScript
1
star
79

strongbox-examples

Usage examples for Strongbox
Java
1
star
80

react-account

React Context Provider and Hook making it easier to use Schibsted Account in your React app
JavaScript
1
star
81

identity-sdk

The identity SDK for Node
JavaScript
1
star
82

cassandra-backup

Stress-free improved Cassandra backups
1
star
83

browser-sdk

[DEPRECATED — DO NOT USE] Schibsted Browser SDK for identity and payment
JavaScript
1
star
84

lambda-slack-app-template

Everything you need to get started on making a Slack App running on AWS Lambda
JavaScript
1
star
85

WAAS-web

HTML
1
star
86

account-sdk-android-web

Schibsted account SDK for Android
Kotlin
1
star