Question

我正在使用jsPDF和HTML2Canvas生成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元素中将背景颜色添加为白色但不起作用。

任何帮助或建议高度赞赏..

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

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

1 个答案: