Install it by running yarn add js-pdf-rendering
or npm install -S js-pdf-rendering
.
yarn build
Library exposes two public functions - convertToDocDefinition
and pdf
as named exports
Purpose of this function is to convert arbitrary nested javascript to format, suitible for rendering pdf file.
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"
}
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
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)