js-pdf-rendering

Library for generating report from json

Add dependency to project

Install it by running yarn add js-pdf-rendering or npm install -S js-pdf-rendering.

Building

yarn build

Usage

Library exposes two public functions - convertToDocDefinition and pdf as named exports

convertToDocDefinition

Purpose of this function is to convert arbitrary nested javascript to format, suitible for rendering pdf file.

Signature

promise docDefintion = convertToDocDefinition(data, header, beautifyMap, contentTransofrmFn, licensePlateKeys, excludeKeys, hightlightedKeys, groupingMap, orderMap, fontImage, backImage)

data - arbitrary javascript object to transform Example:

{
  "destination_addresses": [
    "Philadelphia, PA, USA"
  ],
  "origin_addresses": [
    "New York, NY, USA"
  ],
  "rows": [{
    "elements": [{
      "distance": {
        "text": "94.6 mi",
        "value": 152193
      },
      "duration": {
        "text": "1 hour 44 mins",
        "value": 6227
      },
      "status": "OK"
    }]
  }],
  "status": "OK"
}

header (string, or object) - headline of a document

Before

After

If ommited, will be generated from following keys type, format, art, kennzeichnung, verantwortliche_person

beautifyMap - object, keys of which are keys from data object and values - string to be rendered as captions in pdf document

Example

export const beautifyMap = {
  text: 'This is pretefied header'
};

By default, header's _ character is replaced by space and first letter is capitalized.

Before

After

promise data = contentTransformFn(key, value) = (valueTransformer.js) function, that accepts two arguments, first - key from data object, second one - value from data object and return either value or promise, that resolves to cell value. Returns either a value or a promise, that resolves to that value. Can include absolute path from root of data object. Either returns string, or object.

{
  text:  'Text used as a caption'
  images:  [
    { image: 'url of image', caption: 'text to be printed below an image' }
  ]
}

Image will be retrived asyncronously from url given. If image does not exist or another error is raised, whole rendering process will break.

Example

const map = {
  value: (value) => {
    value + 'some additional text'
  }
};



export function createTransformer(map) {
  return async function (key, value) {
    const utilKey = map[key];

    if (_.isFunction(utilKey)) {
      return await utilKey(value);
    }
    if (typeof Util[utilKey] === "object") {
      return Util[utilKey][value];
    }
    if (typeof Util[utilKey] === "function") {
      return Util[utilKey](value);
    }
    return value;
  };
}

const transformerFn = createTransformer(map);


export default transformerFn;

Before

After

licensePlateKeys - (data/licensePlate.js) object that maps keys from data object to license plate table, and, optionally transforms the result.

Example:

const _tableKeys = {
  nr: "nummer_zul_besch_teil1",
  a: "kennzeichen",
  b: { value: "datum_erstzulassung", transform: datum },
  21: "schluessel_hersteller",
  22: ["schluessel_typ", "schluessel_variante_version"],
  c_1_1: "halter.vollstaendigFamilienname",
  c_1_2: "halter.vollstaendigVorname",
  c_1_3: "halter.vollstaendigAdresse",
  j: "schluessel_fahrzeugklasse",
  4: "schluessel_aufbau",
  e: "fahrzeugidentifizierungsnummer",
  3: "pruefziffer_fahrzeugidentifizierungsnummer",
  d_1: "text_marke",
  d_2: [
    "text_typ",
    "text_variante",
    "text_version",
  ],
  d_3: "text_handelsbezeichnung",
  2: "text_hersteller",
  5: "text_fahrzeugklasse",
  v_9: "text_emissionsklasse_eg_typgenehmigung",
  14: "text_emissionsklasse",
  p_3: "text_kraftstoff",
  10: "schluessel_kraftstoff",
  141: "schluessel_emissionsklasse",
  p_1: { value: "hubraum", transform: padZero(5) },
  l: { value: "anzahl_achsen", transform: padZero(2) },
  9: { value: "anzahl_antriebsachsen", transform: padZero(2) },
  p_2_p_4: {
    value: ["nennleistung_kw", "nennleistung_umdrehung"],
    separator: " / ",
  },
  t: "hoechstgeschwindigkeit",
  18: {
    value: ["laenge_min", "laenge_max"],
    separator: " - ",
  },
  19: {
    value: ["breite_min", "breite_max"],
    separator: " - ",
  },
  20: {
    value: ["hoehe_min", "hoehe_max"],
    separator: " - ",
  },
  g: {
    value: [
      "masse_fahrbereit_min",
      "masse_fahrbereit_max",
    ],
    separator: " - ",
  },
  12: "rauminhalt",
  13: "stuetzlast",
  q: "leistungsgewicht",
  v_7: "kombinierter_co2_wert",
  f_1: "technisch_zulaessige_gesamtmasse",
  f_2: "zulaessige_gesamtmasse",
  71: "technisch_zulaessige_achslast_achse1",
  72: "technisch_zulaessige_achslast_achse2",
  73: "technisch_zulaessige_achslast_achse3",
  81: "staat_zulaessige_achslast_achse1",
  82: "staat_zulaessige_achslast_achse2",
  83: "staat_zulaessige_achslast_achse3",
  u_1: {
    value: "standgeraeusch",
    transform: padZero(3),
  },
  u_2: {
    value: "standgeraeusch_umdrehung",
    transform: padZero(3),
  },
  u_3: {
    value: "fahrgeraeusch",
    transform: padZero(3),
  },
  o_1: {
    value: "anhaengelast_gebremst",
    transform: padZero(4),
  },
  o_2: {
    value: "anhaengelast_ungebremst",
    transform: padZero(4),
  },
  s_1: "anzahl_sitzplaetze",
  s_2: "anzahl_stehplaetze",
  151: "bereifung_achse1",
  152: "bereifung_achse2",
  153: "bereifung_achse3",
  r: {
    value: ["schluessel_grundfarbe", "schluessel_zweitfarbe"],
    separator: " / ",
    transform: farbe
  },
  11: {
    value: ["schluessel_grundfarbe", "schluessel_zweitfarbe"],
    separator: " / ",
  },
  k: "genehmigungsnummer",
  6: {
    value: "datum_genehmigung",
    transform: datum,
  },
  17: "art_genehmigung",
  16: "nummer_zul_besch_teil2",
  _22: {
    value: ["nutzlast", "bemerkungen_ausnahmen", "beiblatt"],
    arrayTransformer: (arg) => {
      const [nutzlast, bemerkungen_ausnahmen, beiblatt] = arg;
      /* eslint-disable prefer-template */
      return ("0-".includes(_.trim(nutzlast)) ? "" : `Nutzlast: ${nutzlast}`) +
              bemerkungen_ausnahmen || "-" +
              beiblatt && `Beiblatt: ${beiblatt}`;


    }
  }
};

Transforms given data to fixed license plate table. If resulting object is empty, no table will be rendered.

excludeKeys - (data/excludedKeys.js) array of strings for keys from data that should be excluded from rendering

Example:

[ "status" ];

Before

After

Does not support excluding nested objects. Only simple values will be excluded.

hightlighKeys - (data/hightlightMap.js) array of keys from data, those values should be highlighted (marked with red color and with increased size)

Example

[ 0 ]

Before

After

groupingMap - (data/groupingMap.js) array of objects with keys headline - those value is string and is used as a header for grouped section and keys - array of strings, keys from data that should be grouped together). Using this parameter allows to override default grouping by bottommost key that contains an object.

Example

[
  {
      headline: 'Hello from Group',
      keys: ['value', 'status'],
  }
]

Example

Before

Before

Does not apply hightlighting, transforming, etc. Value in group line is returned as-is.

orderMap - (data/orderMapping.js) param allows to override group sorting. It's an object, those keys are keys from data array (bottommost key those value is an array) and value is sort order

{
  origin_addresses: 999
}

Before

After

frontImage - first image in document header. Base64 encoded string. Can be undefined (no image will be rendered)

backImage - second image in document header. Base64 encoded string. Can be undefined (no image will be rendered)

pdf

pdf function is used for rendering data to pdf file Usage:

const logo = '...base64 logo image';
const data = convertToDocDefinition(...args);
const pdf = await pdf(logo, data);
const url = URL.createObjectURL(pdf);
window.open(url)