parallax / jsPDF

Client-side JavaScript PDF generation for everyone.
https://parall.ax/products/jspdf
MIT License
29.1k stars 4.65k forks source link

Cannot import AcroForms from jsdpf #3642

Closed faltenberg closed 2 months ago

faltenberg commented 1 year ago

See also Stackoverflow

I am following the official examples and documentation of jspdf (version 2.5.1).

I managed to run this snippet in Vue3 in order to generate a PDF that also includes forms that can be edited in the PDF.

I want to generate the PDF now on the server, running TypeScript in NodeJS v20.5.1. However, I receive an import error or type error when I add the perfectly running code from the Vue app. I am beyond confusion.


Perfectly running in Vue:

<script setup lang="ts">
import { jsPDF } from "jspdf";

function downloadPdf() {
  const { TextField } = jsPDF.AcroForm;

  const doc = new jsPDF({
    orientation: "portrait",
    unit: "mm",
    format: "a4"
  });

  doc.setFontSize(16);
  doc.text("Header", 20, 20);

  const field = new TextField();
  field.Rect = [ coords.x, coords.y-height, width, height ];
  field.defaultValue = value;
  field.fieldName = "form-name";
  doc.addField(field);
  doc.save("test.pdf");
}
</script>

<template>
  <buttonn @click="downloadPdf">Download PDF</button>
</template>

Same code in NodeJS:

import { jsPDF } from "jspdf";

function downloadPdf() {
  const { TextField } = jsPDF.AcroForm;

  const doc = new jsPDF({
    orientation: "portrait",
    unit: "mm",
    format: "a4"
  });

  doc.setFontSize(16);
  doc.text("Header", 20, 20);

  const field = new TextField();
  field.Rect = [ coords.x, coords.y-height, width, height ];
  field.defaultValue = value;
  field.fieldName = "form-name";
  doc.addField(field);
  doc.save("test.pdf");
}

I get this error:

error TS2339: Property 'AcroForm' does not exist on type 'typeof jsPDF'.
    const { TextField } = jsPDF.AcroForm;

However, when I print console.log(jsPDF) I see such a field and all the documented entities like AcroFormTextField.

[Function: I] {
  API: {
    events: [/* ... */],
    addField: [Function (anonymous)],
    /* ... */
    AcroFormTextField: [Function: gt],
    AcroForm: {
      /* ... */
      TextField: [Function: gt]
    },
    /* ... */   
  },
  version: '2.5.1',
  AcroForm: {
    /* ... */
    FormField: [Function: gt],
  }
}

edit: accessing jsPDF.AcroForm, jsPDF.AcroFormTextField or jsPDF.TextField does result in an error as well (and so does jsPDF.API.AcroForm and so on).

error TS2339: Property 'AcroForm' does not exist on type 'typeof jsPDF'.
    console.log(jsPDF.AcroForm);

What do I miss? Why does it work with Vue and not in Node?

souad988 commented 11 months ago

would you plz assign this issue to me?

faltenberg commented 11 months ago

Should I create a new issue with same content? I see no option to modify the list of assignees or add somebody as such. Do I lack permissions?

github-actions[bot] commented 8 months ago

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

MartinX3 commented 8 months ago

I import the forms directly instead in typescript.

github-actions[bot] commented 5 months ago

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

MartinX3 commented 5 months ago

This project is dead. We need to move to alternatives.

MrRio commented 5 months ago

We are sorely in need of some maintainers and contributors. Unfortunately, yWorks had to reduce their commitment to the project.

We can try pull together some resource to get things moving again.

github-actions[bot] commented 2 months ago

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.