httpdf

A small HTTP microservice to generate PDFs.

react-pdf + Express + Docker

Getting started

• Extend the n6g7/httpdf image and copy your own PDF documents source:

  FROM n6g7/httpdf:latest
  COPY ./documents $HTTPDF_DOCUMENTS_SRC
  RUN yarn prebuild

• Build and run:

  docker build . -t my_httpf
  docker run my_httpf -p 8000:80

• Generate pdf with HTTP requests:

  http localhost:8000/doc?a=Hello&b=World > doc.pdf
  http POST localhost:8000/doc a=Hello b=World > doc.pdf #equivalent

See the example directory for a full example with docker-compose.

Features

Props

Query parameters and body data sent with the request are passed to the react components as props.

They are validated using prop-types and, if there are any, errors are returned with a 400 HTTP response.

$ http "localhost:8000/demo?a=a" -p hb
HTTP/1.1 400 Bad Request
Connection: keep-alive
Content-Disposition: attachment; filename="demo.pdf"
Content-Length: 90
Content-Type: application/json; charset=utf-8
Date: Sun, 04 Nov 2018 00:31:23 GMT

{
    "errors": [
        "The prop `b` is marked as required in `Test`, but its value is `undefined`."
    ]
}

Custom filename

By default, the suggested filename of the generated pdf will be computed from the component's file name (doc.js -> doc.pdf). If you would like to receive a different filename, you can override it with the filename query parameter:

$ http "localhost:8000/demo?filename=custom.pdf" -p h
HTTP/1.1 200 OK
Connection: keep-alive
Content-Disposition: attachment; filename="custom.pdf"
Content-Type: application/pdf
Date: Sun, 04 Nov 2018 00:29:58 GMT
Transfer-Encoding: chunked

Watch mode

Use the HTTPDF_WATCH environment variable while developing to watch and automatically reload files as you make changes:

FROM n6g7/httpdf:latest
ENV HTTPDF_WATCH 1
COPY ./documents $HTTPDF_DOCUMENTS_SRC
RUN yarn prebuild

Images

Copy your image files anywhere on the docker image and you can use the react-pdf API to render images:

import { Image, View } from "@react-pdf/renderer";

const Component = ({ path, ...props }) => (
  <View {...props}>
    <Image src={`/images/${path}`} />
  </View>
);

See react-pdf docs for the list of available props.

Custom fonts

Copy your font files anywhere on the docker image and you can use the react-pdf API to use custom fonts:

import { Font, StyleSheet } from "@react-pdf/renderer";

Font.register("/fonts/montserrat.ttf", {
  family: "Montserrat",
});

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    fontFamily: "Montserrat",
    backgroundColor: "#E4E4E4",
  },
});

Browse the test files for a description of all the features.

Async props

Perform asynchronous actions before rendering in the getAsyncProps export:

export default function AsyncPropsTest({ result }) {
  return (
    <Document>
      <Page size="A4">
        <Text>{result}</Text>
      </Page>
    </Document>
  );
}

export const document = true;

export async function getAsyncProps(props) {
  return {
    result: await someAPIcall(),
  };
}

Contributing

• Running in dev: yarn install && yarn
• Release: yarn version