pdfme / pdfme

A TypeScript based PDF generator library, made with React.
https://pdfme.com
MIT License
2.16k stars 192 forks source link

multi page bug, inputs array incorrect typing #425

Closed Chudroy closed 3 months ago

Chudroy commented 3 months ago

Describe the bug

The following function gives a typescript error on the const inputs variable.

Type '({ a: string; b: string; c?: undefined; } | { c: string; a?: undefined; b?: undefined; })[]' is not assignable to type 'Record<string, string>[]'.
  Type '{ a: string; b: string; c?: undefined; } | { c: string; a?: undefined; b?: undefined; }' is not assignable to type 'Record<string, string>'.
    Type '{ a: string; b: string; c?: undefined; }' is not assignable to type 'Record<string, string>'.
      Property 'c' is incompatible with index signature.
        Type 'undefined' is not assignable to type 'string'.ts
public generatePdf2() {
    const template: Template = {
      basePdf: BLANK_PDF,
      schemas: [
        {
          a: {
            type: 'text',
            position: { x: 0, y: 0 },
            width: 10,
            height: 10,
          },
          b: {
            type: 'text',
            position: { x: 10, y: 10 },
            width: 10,
            height: 10,
          },
          c: {
            type: 'text',
            position: { x: 20, y: 20 },
            width: 10,
            height: 10,
          },
        },
      ],
    };

    const inputs = [{ a: 'a1', b: 'b1' }, { c: 'c1' }];

    const plugins = { text, image };

    generate({ template, plugins, inputs })
      .then((pdf) => {
        const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
        window.open(URL.createObjectURL(blob));
      })
      .catch((error) => {
        console.error('PDF generation failed', error);
      });
  }

if i change the inputs to

const inputs = [{ a: 'a1', b: 'b1', c: '' }, { a: '', b: '', c: 'c1' }];

it works and I get a multi page pdf with a1 b1 on first page and c1 on second page. However, this is wrong because i shouldn't have to add empty string properties to useless variables in the second inputs object.

if i type inputs like so:

    const inputs: Record<string, string>[] = [{ a: 'a1', b: 'b1' }, { c: 'c1' }];

the type error disappears and the application compiles. However, the pdf will be blank on the second page.

To Reproduce

import { Injectable } from '@angular/core';
import { BLANK_PDF, Schema, Template } from '@pdfme/common';
import { generate } from '@pdfme/generator';
import { image, text } from '@pdfme/schemas';

  public generatePdf2() {
    const template: Template = {
      basePdf: BLANK_PDF,
      schemas: [
        {
          a: {
            type: 'text',
            position: { x: 0, y: 0 },
            width: 10,
            height: 10,
          },
          b: {
            type: 'text',
            position: { x: 10, y: 10 },
            width: 10,
            height: 10,
          },
          c: {
            type: 'text',
            position: { x: 20, y: 20 },
            width: 10,
            height: 10,
          },
        },
      ],
    };

    const inputs: Record<string, string>[] = [
      { a: 'a1', b: 'b1' },
      { c: 'c1' },
    ];

    const plugins = { text, image };

    generate({ template, plugins, inputs })
      .then((pdf) => {
        const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
        window.open(URL.createObjectURL(blob));
      })
      .catch((error) => {
        console.error('PDF generation failed', error);
      });
  }
``

### Expected behavior

- for the inputs array to work as would be expected: 

    - each object of the inputs array is a page
    - add to the first object of the inputs array for it to appear on the first page, to the second object for the second page, and so on.

- also, handle proper typing of inputs when passed to the generate function.

### Your Environment

```markdown
- pdfme package(@pdfme/generator or @pdfme/ui):
- pdfme version:
- Operating system:
- Node.js version or Browser name & version:

"@pdfme/common": "^3.2.3",
"@pdfme/generator": "^3.2.3",
OS: Linux
Node.js: 20.11.0
Browser: Firefox (Gecko), Brave (Chromium)

Your Error Log

Type '({ a: string; b: string; c?: undefined; } | { c: string; a?: undefined; b?: undefined; })[]' is not assignable to type 'Record<string, string>[]'.
  Type '{ a: string; b: string; c?: undefined; } | { c: string; a?: undefined; b?: undefined; }' is not assignable to type 'Record<string, string>'.
    Type '{ a: string; b: string; c?: undefined; }' is not assignable to type 'Record<string, string>'.
      Property 'c' is incompatible with index signature.
        Type 'undefined' is not assignable to type 'string'.ts

Additional context

Angular application

Rifasca commented 3 months ago

I am also facing a similar issue. Whenever we have a multipage document, it will not save until there is a control in each page.

Rifasca commented 3 months ago

After I updated from Version 2.1.1 to 2.1.3. the issue seems to be fixed. The issue is only there in 2.1.1