Jspdf: AddImage does not support files of type 'UNKNOWN'

[malik-umair]

I'm using version 1.4.1 in Angular 6. I'm trying to create PDF of a table. Below is my code:
HTML:

      <table class="table table-striped table-bordered" id="contentToConvert">
        <thead>
          <tr>
            <td colspan="1" style="vertical-align: middle;">
              <label>Filter By</label>
            </td>
            <td colspan="1">
              <label>Status</label>
              <select class="custom-select" formControlName="paymentStatus" (change)="onSearch()">
                <option value="Success">Success</option>
                <option value="Pending">Pending</option>
                <option value="Failed">Failed</option>
              </select>
            </td>
            <td colspan="2">
              <label>Transaction Date</label>
              <input (ngModelChange)="onSearch()" style="width: 50%; float: left;" formControlName="transactionDate" readonly #d="ngbDatepicker"
                class="form-control" (blur)="d.close()" placeholder="yyyy-mm-dd" ngbDatepicker>
              <div class="input-group-append">
                <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
                  <i class="fa fa-calendar"></i>
                </button>
              </div>
            </td>
          </tr>
          <tr>
            <th>Payment Type</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Deposited On</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let history of paymentHistory">
            <td>{{history.planId}}</td>
            <td>
              <span *ngIf="history?.planAmount">$</span>{{history.planAmount}}</td>
            <td>{{history.paymentStatus}}</td>
            <td>{{history.depositedOn}}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Payment Type</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Deposited On</th>
          </tr>
        </tfoot>
      </table>

TS:

public captureScreen() {
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
  // Few necessary setting options  
  var imgWidth = 208;
  var pageHeight = 295;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;

  const contentDataURL = canvas.toDataURL('image/png')
  let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
  var position = 0;
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
  pdf.save('MYPdf.pdf'); // Generated PDF   
});

}

I'm getting error on pdf.addImage method that:

addImage does not support files of type 'UNKNOWN', please ensure that a plugin for 'UNKNOWN' support is added.
Error: addImage does not support files of type 'UNKNOWN', please ensure that a plugin for 'UNKNOWN' support is added.

[Uzlopak]

what happens if you do before this a
alert(typeof pdf.processPNG)

?

[malik-umair]

Alert says: "function".

Screenshot: http://prntscr.com/lfhxot

[Uzlopak]

In jsPDF 1.4.1 is a mistake (typo) which results in throwing the message and not use the fallback value like here 'png'.

But probably the generated png is wrong. Check the height of the canvas.
alert(canvas.height +'-' + canvas.width);

I guess one or both values are 0 and toDataURL returns "data:," which is not a valid png...

[malik-umair]

Yes you are right both are 0. Alert gave "0-0"

[malik-umair]

What should I do in this case?

[Uzlopak]

before you let html2canvas draw stuff, you should set the canvas size first. Or check the options of html2canvas on how to set the canvas height and width.

Maybe you can learn from this project
https://github.com/eKoopmans/html2pdf

But this is not an issue of jsPDF so far. If you need support maybe stackoverflow is the better place.

[malik-umair]

@arasabbasi Thanks man for your time and help to track the real issue. I'll check html2canvas.