CODEWITHSUNDEEP
angularjspdfjspdf-autotable
Santosh
Santosh

Reputation: 3807

Property 'autoTableEndPosY' does not exist on type 'jsPDF'

I am trying to get the last height value of pdf I am generating. But I see its throwing error saying :-

Property 'autoTableEndPosY' does not exist on type 'jsPDF'

I can't even find the lastAutoTable as per jspdf in the const doc = new jsPDF()

Is there anything I am missing ?

package.json

    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.23",

ts file

import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable'


  downloadPdf() {
    const doc = new jsPDF();
    var img = new Image();
    img.src = "assets/images/logo.png";
    doc.addImage(img, 15, 10, img.naturalWidth, img.naturalHeight)
    doc.text("Title : - ",15, img.naturalHeight + 37)
    autoTable(doc,  {startY: doc.autoTableEndPosY + 5, html: '#tableId' })
    doc.save('user-name.pdf')
  }

enter image description here

Upvotes: 0

Views: 988

Answers (1)

DVN-Anakin
DVN-Anakin

Reputation: 1772

The reason why you got an error saying Property 'autoTableEndPosY' does not exist on type 'jsPDF' is because you have incorrect imports - you should have imported everything from jspdf-autotable not only autoTable - like so:

import {jsPDF} from 'jspdf';
import 'jspdf-autotable';

Also, clearly you need to understand there are 2 different ways how you can generate a PDF file with jspdf-autotable. As of the latest version of jspdf-autotable it's possible to generate a PDF from both front-end (via normal JS) and back-end (via NodeJS):

A) FRONT-END

Using jspdf-autotable on the fron-end is easy. You don't need to instal any packages, just put these scripts into your <html>:

<script src="https://simonbengtsson.github.io/jsPDF-AutoTable/examples/libs/jspdf.umd.js"></script>
<script src="https://simonbengtsson.github.io/jsPDF-AutoTable/dist/jspdf.plugin.autotable.js"></script>

In your index.html you need to have a <table id="your-table-id"> that you want to print out as a PDF. Then, in <script> you simply put html: '#your-table-id' like in my DEMO HERE:

doc.autoTable({
    html: '#your-table-id'
});

Inserting images into you tables from the fron-end is easy too - DEMO HERE.

B) BACK-END

Generating a PDF with jspdf-autotable from the back-end is a bit more complicated because you are not in a browser environment, thus html: '#your-table-id' will NOT work.

First import the packages correctly:

import {jsPDF} from 'jspdf';
import 'jspdf-autotable';

Then, in order to create a table in your PDF, you have to supply doc.autoTable() with an array of values for table headings (<th>s) and table data (<td>s). Also, inserting images into your tables is a real headache because you have to specify coordinates for each image and all images are treated as absolutely positioned elements - DEMO HERE - in the terminal run the script via node index.js

import { jsPDF } from 'jspdf';
import 'jspdf-autotable';

const downloadPdf = () => {
  const doc = new jsPDF('p', 'pt', 'a4');

  const thead = [['ID', 'Name', 'Photo']];
  const tbody = [
    [1, 'Johnny', ''],
    [2, 'Jenny', ''],
  ];
  const imagesData = [
    {
      x: 365,
      y: 65,
      src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gKgSUNDX1BST0ZJTEUAAQEAAAKQbGNtcwQwAABtbnRyUkdCIFhZWiAH3QAIAA4AFgAoAB1hY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAADhjcHJ0AAABQAAAAE53dHB0AAABkAAAABRjaGFkAAABpAAAACxyWFlaAAAB0AAAABRiWFlaAAAB5AAAABRnWFlaAAAB+AAAABRyVFJDAAACDAAAACBnVFJDAAACLAAAACBiVFJDAAACTAAAACBjaHJtAAACbAAAACRtbHVjAAAAAAAAAAEAAAAMZW5VUwAAABwAAAAcAHMAUgBHAEIAIABiAHUAaQBsAHQALQBpAG4AAG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAMgAAABwATgBvACAAYwBvAHAAeQByAGkAZwBoAHQALAAgAHUAcwBlACAAZgByAGUAZQBsAHkAAAAAWFlaIAAAAAAAAPbWAAEAAAAA0y1zZjMyAAAAAAABDEoAAAXj///zKgAAB5sAAP2H///7ov///aMAAAPYAADAlFhZWiAAAAAAAABvlAAAOO4AAAOQWFlaIAAAAAAAACSdAAAPgwAAtr5YWVogAAAAAAAAYqUAALeQAAAY3nBhcmEAAAAAAAMAAAACZmYAAPKnAAANWQAAE9AAAApbcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltwYXJhAAAAAAADAAAAAmZmAADypwAADVkAABPQAAAKW2Nocm0AAAAAAAMAAAAAo9cAAFR7AABMzQAAmZoAACZmAAAPXP/bAEMABQMEBAQDBQQEBAUFBQYHDAgHBwcHDwsLCQwRDxISEQ8RERMWHBcTFBoVEREYIRgaHR0fHx8TFyIkIh4kHB4fHv/bAEMBBQUFBwYHDggIDh4UERQeHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHv/AABEIABgAGAMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAABwYI/8QAJxAAAQMEAQMDBQAAAAAAAAAAAQIDBAAFBhEhEiIxBxNBFjJRYXH/xAAZAQACAwEAAAAAAAAAAAAAAAAAAwEEBQb/xAAjEQABAwMDBQEAAAAAAAAAAAABAAIDBAUREjHBITJBUWHR/9oADAMBAAIRAxEAPwDbTM5x+0YE5lYlx7hEZ6W1JhyEOkvK8NbBICufn4BNS+7et31DZJlonW6Lbo01Pt+83KJcbTvfIOgeBo615qNYplFvhTDCessNmySnEiWw2pXU5pCkpWVkk7T1E8Ac7/NVbJIuGW7DlS4NsTCQ5BLSAqO2tEpSk9ijvvQrz3A62N6oqbjI7DCN1bp7fGdUgcOiy8eEJLYmwVbbcOkFKu0jyRz92tUpiubWGBbXrbd8MiSYpTpo2+c7HU0oAd/QSpClk8lSgfNKNZyoGMbKRpRw4jWlAbT+q6Q9EfTy85RhMJN7aadQ06JVvZkOnpcaI0UqPI6SeQn+71ulKWWhz2tPn8KZTjuPocrO5xYo87KH3I9si2dMhKBHaRFUlKhyknpA7TxsnQApSlZVRVyQENaustVvpauMulYMj6Rzhf/Z',
    },
    {
      x: 365,
      y: 85,
      src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gKgSUNDX1BST0ZJTEUAAQEAAAKQbGNtcwQwAABtbnRyUkdCIFhZWiAH3QAIAA4AFgAoAB1hY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAADhjcHJ0AAABQAAAAE53dHB0AAABkAAAABRjaGFkAAABpAAAACxyWFlaAAAB0AAAABRiWFlaAAAB5AAAABRnWFlaAAAB+AAAABRyVFJDAAACDAAAACBnVFJDAAACLAAAACBiVFJDAAACTAAAACBjaHJtAAACbAAAACRtbHVjAAAAAAAAAAEAAAAMZW5VUwAAABwAAAAcAHMAUgBHAEIAIABiAHUAaQBsAHQALQBpAG4AAG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAMgAAABwATgBvACAAYwBvAHAAeQByAGkAZwBoAHQALAAgAHUAcwBlACAAZgByAGUAZQBsAHkAAAAAWFlaIAAAAAAAAPbWAAEAAAAA0y1zZjMyAAAAAAABDEoAAAXj///zKgAAB5sAAP2H///7ov///aMAAAPYAADAlFhZWiAAAAAAAABvlAAAOO4AAAOQWFlaIAAAAAAAACSdAAAPgwAAtr5YWVogAAAAAAAAYqUAALeQAAAY3nBhcmEAAAAAAAMAAAACZmYAAPKnAAANWQAAE9AAAApbcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltwYXJhAAAAAAADAAAAAmZmAADypwAADVkAABPQAAAKW2Nocm0AAAAAAAMAAAAAo9cAAFR7AABMzQAAmZoAACZmAAAPXP/bAEMABQMEBAQDBQQEBAUFBQYHDAgHBwcHDwsLCQwRDxISEQ8RERMWHBcTFBoVEREYIRgaHR0fHx8TFyIkIh4kHB4fHv/bAEMBBQUFBwYHDggIDh4UERQeHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHv/AABEIABgAGAMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAABwYI/8QAJxAAAQMEAQMDBQAAAAAAAAAAAQIDBAAFBhEhEiIxBxNBFjJRYXH/xAAZAQACAwEAAAAAAAAAAAAAAAAAAwEEBQb/xAAjEQABAwMDBQEAAAAAAAAAAAABAAIDBAUREjHBITJBUWHR/9oADAMBAAIRAxEAPwDbTM5x+0YE5lYlx7hEZ6W1JhyEOkvK8NbBICufn4BNS+7et31DZJlonW6Lbo01Pt+83KJcbTvfIOgeBo615qNYplFvhTDCessNmySnEiWw2pXU5pCkpWVkk7T1E8Ac7/NVbJIuGW7DlS4NsTCQ5BLSAqO2tEpSk9ijvvQrz3A62N6oqbjI7DCN1bp7fGdUgcOiy8eEJLYmwVbbcOkFKu0jyRz92tUpiubWGBbXrbd8MiSYpTpo2+c7HU0oAd/QSpClk8lSgfNKNZyoGMbKRpRw4jWlAbT+q6Q9EfTy85RhMJN7aadQ06JVvZkOnpcaI0UqPI6SeQn+71ulKWWhz2tPn8KZTjuPocrO5xYo87KH3I9si2dMhKBHaRFUlKhyknpA7TxsnQApSlZVRVyQENaustVvpauMulYMj6Rzhf/Z',
    },
  ];

  doc.autoTable({
    head: thead,
    body: tbody,
    startY: doc.autoTableEndPosY + 5,
  });

  // Add images
  for (let i = 0; i < imagesData.length; i++) {
    const image = imagesData[i];
    const dimensionX = 15;
    const dimensionY = 15;
    doc.addImage(image.src, 'JPEG', image.x, image.y, dimensionX, dimensionY);
  }

  const timestamp = new Date().getTime();

  doc.save('table_' + timestamp + '.pdf');
};

downloadPdf();

Upvotes: 1

Related Questions