nwjs and pdf-lib

[Lex-talionis]

Hi Guys,

I've mainly been using this library in node js to manipulate pdf without ever needing to render them. I'm expanding into an app now using NWJS and although i have followed the examples in the web directory i'm coming across the following error.

keywords must be of type Array, but was actually of type undefined

This to me looks like the syntax as im using the browser code in the js files im using in the view.

for example this is my view

<title>Test 18</title> <script type="text/javascript" src="https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js" ></script>

Prev Run Test Next

<iframe id="iframe"></iframe> <script src="js/pdf-lib.js"></script>

and this is my js file

`const PDFLib = require ("pdf-lib");

const fetchBinaryAsset = (asset) =>
fetch(/assets/${asset}).then((res) => res.arrayBuffer());

const fetchStringAsset = (asset) =>
fetch(/assets/${asset}).then((res) => res.text());

const renderInIframe = (pdfBytes) => {
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const blobUrl = URL.createObjectURL(blob);
document.getElementById('iframe').src = blobUrl;
};

const ipsumLines = [
'Eligendi est pariatur quidem in non excepturi et.',
'Consectetur non tenetur magnam est corporis tempor.',
'Labore nisi officiis quia ipsum qui voluptatem omnis.',
];

// This test creates a new PDF document and inserts pages to it.
// Each page is testing different features of pdf-lib.
async function test() {
const {
clip,
clipEvenOdd,
closePath,
cmyk,
degrees,
drawRectangle,
endPath,
grayscale,
LineCapStyle,
setLineJoin,
LineJoinStyle,
typedArrayFor,
lineTo,
moveTo,
PDFDocument,
popGraphicsState,
pushGraphicsState,
rgb,
StandardFonts,
AFRelationship,
} = PDFLib;

const pdfDoc = await PDFDocument.create();

console.log(pdfDoc);
var meh = ['eggs', 'wall', 'fall', 'king', 'horses', 'men'];

console.log(pdfDoc.setKeywords())

pdfDoc.setTitle('🥚 The Life of an Egg 🍳');
pdfDoc.setAuthor('Humpty Dumpty');
pdfDoc.setSubject('📘 An Epic Tale of Woe 📖');
pdfDoc.setKeywords(meh);
pdfDoc.setProducer('PDF App 9000 🤖');
pdfDoc.setCreator('PDF App 9000 🤖');
pdfDoc.setCreationDate(new Date('2018-06-24T01:58:37.228Z'));
pdfDoc.setModificationDate(new Date('2018-12-21T07:00:11.000Z'));

pdfDoc.registerFontkit(fontkit);

await pdfDoc.attach(
    await fetchBinaryAsset('images/greyscale_bird.png'),
    'bird.png',
    {
        mimeType: 'image/png',
        description: 'A bird in greyscale 🐦',
        creationDate: new Date('2006/06/06'),
        modificationDate: new Date('2007/07/07'),
        afRelationship: AFRelationship.Data,
    },
);

const csvString = [
    'Year,Make,Model',
    '1997,Ford,E350',
    '2000,Mercury,Cougar',
].join('\n');
await pdfDoc.attach(typedArrayFor(csvString), 'cars.csv', {
    mimeType: 'text/csv',
    description: 'Some car info 🚗',
    creationDate: new Date('2000/01/13'),
    modificationDate: new Date('2012/12/12'),
    afRelationship: AFRelationship.Unspecified,
});

const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman);

const size = 750;

pdfDoc.addJavaScript(
    'main',
    'console.show(); console.println("Hello World!")',
);

/********************** Page 1 **********************/

    // This page tests different drawing operations as well as adding custom
    // operators to the page content.

const page1 = pdfDoc.addPage([size, size]);

// Upper-left Quadrant
page1.moveTo(0, size / 2);
page1.drawSquare({ size: size / 2, color: rgb(1, 0, 0) });
page1.pushOperators(
    pushGraphicsState(),
    moveTo(0, size / 2),
    lineTo(0, size),
    lineTo(size / 2, size),
    closePath(),
    clip(),
    endPath(),
    ...drawRectangle({
        x: size / 8,
        y: size / 2 + size / 8,
        width: size / 4,
        height: size / 4,
        borderWidth: 50,
        borderColor: rgb(1, 1, 0),
        rotate: degrees(0),
        xSkew: degrees(0),
        ySkew: degrees(0),
        color: undefined,
    }),
    popGraphicsState(),
);

// Upper-right quadrant
page1.pushOperators(pushGraphicsState());
page1.moveTo(size / 2, size / 2);
page1.drawSquare({ size: size / 2, color: rgb(0, 1, 0) });
page1.drawEllipse({
    x: size / 2 + size / 4,
    y: size / 2 + size / 4,
    xScale: 25,
    yScale: 150,
    color: rgb(255 / 255, 153 / 255, 51 / 255),
    borderWidth: 2,
    borderColor: rgb(0, 1, 1),
    borderDashArray: [10],
});
page1.drawEllipse({
    x: size / 2 + size / 4,
    y: size / 2 + size / 4,
    xScale: 75,
    yScale: 50,
    color: undefined,
});
page1.drawEllipse({
    x: size / 2 + size / 4,
    y: size / 2 + size / 4,
    xScale: 150,
    yScale: 100,
    color: undefined,
});
page1.pushOperators(clipEvenOdd(), endPath());
page1.setFont(timesRomanFont);
page1.setFontColor(rgb(1, 0, 1));
page1.setFontSize(32);
page1.setLineHeight(32);
page1.moveTo(size / 2 + 5, size - 5 - 25);
page1.drawText(
    [...ipsumLines, ...ipsumLines, ...ipsumLines, ...ipsumLines].join('\n'),
);
page1.pushOperators(popGraphicsState());

// Lower-left quadrant
page1.moveTo(0, 0);
page1.drawSquare({ size: size / 2, color: cmyk(1, 0, 0, 0) });
page1.drawCircle({
    x: size / 4,
    y: size / 4,
    size: 150,
    borderWidth: 10,
    borderDashArray: [25],
    borderDashPhase: 25,
    borderColor: cmyk(0, 1, 0, 0),
    borderLineCap: LineCapStyle.Round,
});

page1.drawLine({
    start: {
        x: size / 4,
        y: size / 4,
    },
    end: {
        x: size / 4 + 100,
        y: size / 4 + 100,
    },
    color: rgb(0, 1, 0),
    thickness: 3,
    dashArray: [12, 6],
    lineCap: LineCapStyle.Round,
});

// Lower-right quadrant
page1.moveTo(size / 2, 0);
page1.drawSquare({ size: size / 2, color: grayscale(0.8) });
page1.pushOperators(
    pushGraphicsState(),
    setLineJoin(LineJoinStyle.Round),
);
page1.drawSquare({
    x: size / 2 + size / 4,
    y: 25,
    size: size / 2.25 - 2 * 50,
    rotate: degrees(45),
    borderColor: grayscale(0.6),
    borderWidth: 15,
});
page1.pushOperators(setLineJoin(LineJoinStyle.Bevel));
page1.drawSquare({
    x: size / 2 + 54,
    y: size / 4 + 1,
    size: size / 2.25 - 2 * 100,
    rotate: degrees(-45),
    xSkew: degrees(45 / 2),
    ySkew: degrees(45 / 2),
    color: grayscale(1),
    borderColor: grayscale(0),
    borderWidth: 15,
});
page1.pushOperators(popGraphicsState());

// Middle
const squareSize = 40;
page1.drawSquare({
    x: size / 2 - squareSize / 2,
    y: size / 2 - squareSize / 2,
    size: squareSize,
    borderWidth: 2,
    borderColor: rgb(1, 0, 1),
    borderDashArray: [2, 4],
});

const rectangleSizeX = 60;
const rectangleSizeY = 50;
page1.drawRectangle({
    x: size / 2 - rectangleSizeX / 2,
    y: size / 2 - rectangleSizeY / 2,
    width: rectangleSizeX,
    height: rectangleSizeY,
    borderWidth: 2,
    borderColor: rgb(1, 1, 1),
    borderDashArray: [4, 8],
});

/********************** Page 2 **********************/

    // This page tests placement of text with different fonts

const page2 = pdfDoc.addPage([size, size]);

page2.drawSquare({ size, color: rgb(253 / 255, 246 / 255, 227 / 255) });
page2.setFontColor(rgb(101 / 255, 123 / 255, 131 / 255));

const [
    ubuntuBase64,
    fantasqueBytes,
    indieFlowerBytes,
    greatVibesBytes,
    appleStormBytes,
    bioRhymeBytes,
    pressStart2PBytes,
    hussar3DBytes,
] = await Promise.all([
    fetchStringAsset('fonts/ubuntu/Ubuntu-R.ttf.base64'),
    fetchBinaryAsset(
        'fonts/fantasque/OTF/FantasqueSansMono-BoldItalic.otf',
    ),
    fetchBinaryAsset('fonts/indie_flower/IndieFlower.ttf'),
    fetchBinaryAsset('fonts/great_vibes/GreatVibes-Regular.ttf'),
    fetchBinaryAsset('fonts/apple_storm/AppleStormCBo.otf'),
    fetchBinaryAsset('fonts/bio_rhyme/BioRhymeExpanded-Regular.ttf'),
    fetchBinaryAsset('fonts/press_start_2p/PressStart2P-Regular.ttf'),
    fetchBinaryAsset('fonts/hussar_3d/Hussar3DFour.otf'),
]);

const ubuntuFont = await pdfDoc.embedFont(ubuntuBase64, { subset: true });
page2.drawText(ipsumLines.join('\n'), {
    y: size - 20,
    size: 20,
    font: ubuntuFont,
    lineHeight: 20,
});

const fantasqueFont = await pdfDoc.embedFont(fantasqueBytes);
page2.drawText(ipsumLines.join('\n'), {
    y: size - 105,
    size: 25,
    font: fantasqueFont,
    lineHeight: 25,
});

const indieFlowerFont = await pdfDoc.embedFont(indieFlowerBytes, {
    subset: true,
});
page2.drawText(ipsumLines.join('\n'), {
    y: size - 200,
    size: 25,
    font: indieFlowerFont,
    lineHeight: 25,
});

const greatVibesFont = await pdfDoc.embedFont(greatVibesBytes, {
    subset: true,
});
page2.drawText(ipsumLines.join('\n'), {
    y: size - 300,
    size: 30,
    font: greatVibesFont,
    lineHeight: 30,
});

const appleStormFont = await pdfDoc.embedFont(appleStormBytes);
page2.drawText(ipsumLines.join('\n'), {
    y: size - 425,
    size: 25,
    font: appleStormFont,
    lineHeight: 25,
});

const bioRhymeFont = await pdfDoc.embedFont(bioRhymeBytes, {
    subset: true,
});
page2.drawText(ipsumLines.join('\n'), {
    y: size - 500,
    size: 15,
    font: bioRhymeFont,
    lineHeight: 15,
});

const pressStart2PFont = await pdfDoc.embedFont(pressStart2PBytes, {
    subset: true,
});
page2.drawText(ipsumLines.join('\n'), {
    y: size - 575,
    size: 15,
    font: pressStart2PFont,
    lineHeight: 15,
});

const hussar3DFont = await pdfDoc.embedFont(hussar3DBytes);
page2.drawText(ipsumLines.join('\n'), {
    y: size - 650,
    size: 25,
    font: hussar3DFont,
    lineHeight: 25,
});

/********************** Page 3 **********************/

    // This page tests embedding and placing different images.

const page3Height = 1750;
const page3 = pdfDoc.addPage([size, page3Height]);

const [
    catRidingUnicornBase64,
    minionsLaughingBytes,
    greyscaleBirdBase64,
    minionsBananaAlphaBytes,
    minionsBananaNoAlphaBytes,
    smallMarioBytes,
] = await Promise.all([
    fetchStringAsset('images/cat_riding_unicorn.jpg.base64'),
    fetchBinaryAsset('images/minions_laughing.jpg'),
    fetchStringAsset('images/greyscale_bird.png.base64.uri'),
    fetchBinaryAsset('images/minions_banana_alpha.png'),
    fetchBinaryAsset('images/minions_banana_no_alpha.png'),
    fetchBinaryAsset('images/small_mario.png'),
]);

const catRidingUnicornImage = await pdfDoc.embedJpg(
    catRidingUnicornBase64,
);
const minionsLaughingImage = await pdfDoc.embedJpg(minionsLaughingBytes);
const greyscaleBirdImage = await pdfDoc.embedPng(greyscaleBirdBase64);
const minionsBananaAlphaImage = await pdfDoc.embedPng(
    minionsBananaAlphaBytes,
);
const minionsBananaNoAlphaImage = await pdfDoc.embedPng(
    minionsBananaNoAlphaBytes,
);
const smallMarioImage = await pdfDoc.embedPng(smallMarioBytes);

const catRidingUnicornDims = catRidingUnicornImage.scale(0.2);
const minionsLaughingDims = minionsLaughingImage.scale(0.75);
const greyscaleBirdDims = greyscaleBirdImage.scale(0.75);
const minionsBananaAlphaDims = minionsBananaAlphaImage.scale(0.5);
const minionsBananaNoAlphaDims = minionsBananaNoAlphaImage.scale(0.5);
const smallMarioDims = smallMarioImage.scale(0.18);

// const {
//   setTextRenderingMode,
//   setStrokingColor,
//   TextRenderingMode,
// } = PDFLib;
// page3.pushOperators(
//   setTextRenderingMode(TextRenderingMode.OutlineAndClip),
//   setStrokingColor(rgb(0.5, 0.5, 0.5)),
// );
// page3.drawText('Unicornz!', {
//   x: 75,
//   y: page3Height - catRidingUnicornDims.height + 75,
//   font: ubuntuFont,
//   size: 50,
// });
// page3.pushOperators(clip(), endPath());

page3.moveTo(0, 0);
page3.drawRectangle({
    width: minionsBananaAlphaDims.width,
    height:
        minionsBananaAlphaDims.height +
        minionsBananaNoAlphaDims.height +
        smallMarioDims.height,
    color: rgb(0, 1, 0),
});

page3.moveTo(0, page3Height);
page3.moveDown(catRidingUnicornDims.height);
page3.drawImage(catRidingUnicornImage, catRidingUnicornDims);

page3.moveDown(minionsLaughingDims.height);
page3.drawImage(minionsLaughingImage, minionsLaughingDims);

page3.moveDown(greyscaleBirdDims.height);
page3.drawImage(greyscaleBirdImage, greyscaleBirdDims);

page3.moveDown(minionsBananaAlphaDims.height);
page3.drawImage(minionsBananaAlphaImage, minionsBananaAlphaDims);

page3.moveDown(minionsBananaNoAlphaDims.height);
page3.drawImage(minionsBananaNoAlphaImage, minionsBananaNoAlphaDims);

page3.moveDown(smallMarioDims.height);
page3.drawImage(smallMarioImage, smallMarioDims);

/********************** Page 4 **********************/

    // This page tests embedding other PDF pages. First we embed page 3 of
    // this document but rotate and scale it. Then we take an external PDF
    // document and embed two pages of it next to each other.

const page4 = pdfDoc.addPage([size, size]);

const embeddedPage3 = await pdfDoc.embedPage(page3);
page4.drawPage(embeddedPage3, {
    x: 10,
    y: size - 10,
    xScale: 1.52,
    yScale: 0.42,
    rotate: degrees(-90),
});

const [normalPdfBytes] = await Promise.all([
    fetchBinaryAsset('pdfs/normal.pdf'),
]);

const [
    embeddedPage1,
    embeddedPage2,
] = await pdfDoc.embedPdf(normalPdfBytes, [0, 1]);
page4.drawPage(embeddedPage1, {
    x: 40,
    y: 100,
    xScale: 0.5,
    yScale: 0.5,
    opacity: 0.5,
});
page4.drawPage(embeddedPage2, {
    x: 400,
    y: 100,
    xScale: 0.5,
    yScale: 0.5,
});

/********************** Page 5 **********************/

    // This page tests creating new AcroForm fields.

const pastels = {
        greyishGreen: rgb(85 / 255, 117 / 255, 113 / 255),
        brownish: rgb(212 / 255, 154 / 255, 137 / 255),
        tan: rgb(247 / 255, 209 / 255, 186 / 255),
        whiteish: rgb(244 / 255, 244 / 255, 244 / 255),
        lightBlue: rgb(221 / 255, 243 / 255, 245 / 255),
        blue: rgb(166 / 255, 220 / 255, 239 / 255),
        pinkish: rgb(242 / 255, 170 / 255, 170 / 255),
        hotPink: rgb(227 / 255, 99 / 255, 135 / 255),
        yellow: rgb(250 / 255, 240 / 255, 175 / 255),
        darkBlue: rgb(7 / 255, 104 / 255, 159 / 255),
    };

const page5 = pdfDoc.addPage([size, size]);

const form = pdfDoc.getForm();

const fWidth = 100;
const fHeight = 50;
const fPadding = 25;
const fMax = Math.max(fWidth, fHeight);

// Text Fields
[
    { name: 'moi.text.field[0]', text: 'Foo', font: ubuntuFont },
    { name: 'moi.text.field[1]', text: 'Bar' },
    { name: 'moi.text.field[2]', text: 'Qux', font: ubuntuFont },
    { name: 'moi.text.field[3]', text: 'Baz' },
].forEach(({ name, text, font }, idx) => {
    const textField = form.createTextField(name);
    textField.setText(text);
    textField.addToPage(page5, {
        x: fPadding + fWidth,
        y: size - fMax - fPadding,
        width: fWidth,
        height: fHeight,
        rotate: degrees(90 * idx),
        borderWidth: 4,
        backgroundColor: pastels.pinkish,
        borderColor: pastels.blue,
        textColor: pastels.whiteish,
        font: ubuntuFont,
    });
    if (font) textField.updateAppearances(font);
});

// Buttons
[
    { name: 'moi.button.field[0]', text: 'Earth', font: ubuntuFont },
    { name: 'moi.button.field[1]', text: 'Mars', font: timesRomanFont },
    { name: 'moi.button.field[2]', text: 'Venus', font: ubuntuFont },
    { name: 'moi.button.field[3]', text: 'Saturn', font: timesRomanFont },
].forEach(({ name, text, font }, idx) => {
    const button = form.createButton(name);
    button.addToPage(text, page5, {
        x: fPadding * 2 + fWidth * 3,
        y: size - fMax - fPadding,
        width: fWidth,
        height: fHeight,
        rotate: degrees(90 * idx),
        borderWidth: 4,
        backgroundColor: pastels.brownish,
        borderColor: pastels.tan,
        textColor: pastels.greyishGreen,
        font,
    });
});

// Dropdowns
[
    { name: 'moi.dropdown.field[0]', choice: 'Exia', font: ubuntuFont },
    {
        name: 'moi.dropdown.field[1]',
        choice: 'Kyrios',
        font: timesRomanFont,
    },
    { name: 'moi.dropdown.field[2]', choice: 'Dynames', font: ubuntuFont },
    {
        name: 'moi.dropdown.field[3]',
        choice: 'Virtue',
        font: timesRomanFont,
    },
].forEach(({ name, choice, font }, idx) => {
    const dropdown = form.createDropdown(name);
    dropdown.addOptions(['Exia', 'Dynames', 'Kyrios', 'Virtue']);
    dropdown.select(choice);
    dropdown.addToPage(page5, {
        x: fPadding * 3 + fWidth * 5,
        y: size - fMax - fPadding,
        width: fWidth,
        height: fHeight,
        rotate: degrees(90 * idx),
        borderWidth: 4,
        backgroundColor: pastels.greyishGreen,
        borderColor: pastels.hotPink,
        textColor: pastels.brownish,
        font,
    });
});

// Check Boxes
[
    { name: 'moi.checkBox.field[0]' },
    { name: 'moi.checkBox.field[1]' },
    { name: 'moi.checkBox.field[2]' },
    { name: 'moi.checkBox.field[3]' },
].forEach(({ name }, idx) => {
    const checkBox = form.createCheckBox(name);
    checkBox.check();
    checkBox.addToPage(page5, {
        x: fPadding + fWidth,
        y: size - fMax * 3 - fPadding * 2,
        width: fHeight,
        height: fHeight,
        rotate: degrees(90 * idx),
        borderWidth: 4,
        backgroundColor: pastels.whiteish,
        borderColor: pastels.greyishGreen,
        textColor: pastels.hotPink,
    });
});

// Option Lists
[
    {
        name: 'moi.optionList.field[0]',
        choice: 'TypeScript',
        font: ubuntuFont,
    },
    {
        name: 'moi.optionList.field[1]',
        choice: 'Kotlin',
        font: timesRomanFont,
    },
    { name: 'moi.optionList.field[2]', choice: 'Python', font: ubuntuFont },
    {
        name: 'moi.optionList.field[3]',
        choice: 'Swift',
        font: timesRomanFont,
    },
].forEach(({ name, choice, font }, idx) => {
    const optionList = form.createOptionList(name);
    optionList.addOptions(['TypeScript', 'Kotlin', 'Python', 'Swift']);
    optionList.select(choice);
    optionList.addToPage(page5, {
        x: fPadding * 2 + fWidth * 3,
        y: size - fMax * 3 - fPadding * 2,
        width: fWidth,
        height: fHeight,
        rotate: degrees(90 * idx),
        borderWidth: 4,
        backgroundColor: pastels.tan,
        borderColor: pastels.yellow,
        textColor: pastels.hotPink,
        font,
    });
});

// Radio Group
const radioGroup = form.createRadioGroup('moi.radioGroup.field[0]');

[
    { option: 'Bing' },
    { option: 'Boing' },
    { option: 'Bang' },
    { option: 'Bloop' },
].forEach(({ option }, idx) => {
    radioGroup.addOptionToPage(option, page5, {
        x: fPadding * 3 + fWidth * 5,
        y: size - fMax * 3 - fPadding * 2,
        width: fHeight,
        height: fHeight,
        rotate: degrees(90 * idx),
        borderWidth: 4,
        backgroundColor: pastels.blue,
        borderColor: pastels.pinkish,
        textColor: pastels.yellow,
    });
});

radioGroup.select('Bing');

// Combed Text Field
const combedTf = form.createTextField('moi.combed.text.field');
combedTf.setMaxLength(7);
combedTf.enableCombing();
combedTf.setText('ABC-123');
combedTf.addToPage(page5, {
    x: fPadding + fWidth / 2,
    y: size - fMax * 5 - fPadding * 3,
    width: fWidth * 2.5,
    height: fHeight,
    borderWidth: 4,
    backgroundColor: pastels.yellow,
    borderColor: pastels.brownish,
    textColor: pastels.darkBlue,
    font: ubuntuFont,
});

// Multiline Text Field
const multilineTf = form.createTextField('moi.multiline.text.field');
multilineTf.enableMultiline();
multilineTf.setText(
    `In the morning, when you can't get out of bed, tell yourself: "I'm getting up to do the work only a man can do. How can I possibly hesitate or complain when I'm about to accomplish the task for which I was born? Was I made for lying warm in bed under a pile of blankets?"\n\n"But I enjoy it here."\n\nWas it for enjoyment you were born? Are you designed to act or to be acted upon?\n\n\t\t\t\t\t\t\t\t\t\t - Marcus Aurelius`,
);
multilineTf.addToPage(page5, {
    x: fPadding * 3 + fWidth / 2 + fWidth * 2.5,
    y: size - fMax * 5 - fPadding * 3 - fHeight * 3,
    width: fWidth * 2.5,
    height: fHeight * 5,
    borderWidth: 4,
    backgroundColor: pastels.whiteish,
    borderColor: pastels.brownish,
    textColor: pastels.greyishGreen,
    font: ubuntuFont,
});

/********************** Print Metadata **********************/

console.log('Title:', pdfDoc.getTitle());
console.log('Author:', pdfDoc.getAuthor());
console.log('Subject:', pdfDoc.getSubject());
console.log('Creator:', pdfDoc.getCreator());
console.log('Keywords:', pdfDoc.getKeywords());
console.log('Producer:', pdfDoc.getProducer());
console.log('Creation Date:', pdfDoc.getCreationDate());
console.log('Modification Date:', pdfDoc.getModificationDate());

/********************** Export PDF **********************/

const pdfBytes = await pdfDoc.save();

renderInIframe(pdfBytes);

}`

im sure it something silly but would appriecate a nudge in the right directions.

[Lex-talionis]

Sorry, waste of text figured it out must of been a late night.