Skip to content

n6g7/httpdf

Repository files navigation

httpdf

CircleCI Docker Hub

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