使用 jsPDF 生成的 PDF 显示黑色背景问题答案

【问题标题】：PDF's generated using jsPDF showing black background issues使用 jsPDF 生成的 PDF 显示黑色背景问题
【发布时间】：2018-03-08 12:00:41
【问题描述】：

我正在使用带有 HTML2Canvas 的 jsPDF 来生成 PDF，下面是我的代码

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>

我正在使用 HTML2Canvas 0.4.1v 并且能够生成 pdf。但是，当 PDF 生成时，它会显示黑色背景并隐藏以下内容。

尝试在div 元素中添加背景颜色为白色，但不起作用。

任何帮助或建议都非常感谢..

【问题讨论】：

同样的问题怎么解决？？

标签： javascript angular jspdf html2canvas

【解决方案1】：

看这个简单的例子，对我来说这个工作：

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');
  }
}

【讨论】：