PDF's generated using jsPDF showing black background issues

Question

I am using jsPDF with HTML2Canvas to generate the PDF and below is my code

ts:

  import * as jsPDF from 'jspdf';

  .... 
  exportHTML2() {
    const options = { background: '#000', };
    const pdf = new jsPDF('p', 'cm', [3, 5]);
    pdf.addHTML(this.content.nativeElement, options, () => {
      pdf.save('Contract Details.pdf');
    });
  }

html:

<div class="modal-header">
  <button type="button" class="close" aria-label="Close" (click)="onClose()">
    <span aria-hidden="true">&times;</span>
  </button>
  <button class="btn dark btn-sm btn-outline" (click)="exportHTML2()">Export PDF</button>
  <h4 class="modal-title">Contract Detail</h4>
</div>
<div class="modal-body" style="max-height: 400px;overflow: auto;">
    <div class="page-container page-sidebar-closed page-content-white">
        <div class="page-content">
            <div #content style="background-color: white;">
                <div id="content">
                    <!--other html elements -->
                    <table>
                        ...
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

I am using HTML2Canvas 0.4.1v and am able to generate the pdf. But when ever the PDF is generated its showing black background and hidding the below content.

Tried by adding background color as white in div element but not working.

Any help or suggestions highly appreciated..

Answer 1

Look this simple example, for me this work:

import { Component } from '@angular/core';
declare let jsPDF;

@Component({
  selector: 'my-app',
  template: 
    `<h1>My file</h1>
    <div class="container" id="div1">
        <button id="create" (click)="convert()">Pdf file</button> 
    </div>
    `
})
export class AppComponent { 

  convert(){
    var item = {
      "Name" : "XYZ",
      "Age" : "22",
      "Gender" : "Male"
    };
    var doc = new jsPDF();
    var col = ["Details", "Values"];
    var rows = [];

    for(var key in item){
        var temp = [key, item[key]];
        rows.push(temp);
    }

    doc.autoTable(col, rows);

    doc.save('Test.pdf');
  }
}