angular - 以 Angular 6 从 html 导出 Pdf

Question

我想以 angular 6 从 html 导出 pdf。所以，我正在使用 jspdf 库。但我无法提供颜色和背景颜色等样式。我怎样才能做到这一点？ (如果有来自jspdf的任何其他免费库，我可以使用它)您可以从下面的链接看到演示。

DEMO

.ts 文件

export class AppComponent  {
  @ViewChild('reportContent') reportContent: ElementRef;

    downloadPdf() {
    const doc = new jsPDF();
    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const content = this.reportContent.nativeElement;

    doc.fromHTML(content.innerHTML, 15, 15, {
      'width': 190,
      'elementHandlers': specialElementHandlers
    });

    doc.save('asdfghj' + '.pdf');
  }
}

.html 文件

<div #reportContent class="p-col-8 p-offset-2">
  <table>
    <tr>
      <td style="color: red;background-color: blue;border:solid;">1111
      </td>
      <td style="border:solid;">2222
      </td>
    </tr>
  </table>
</div>

<button pButton type="button" label="Pdf" (click)="downloadPdf()">Export Pdf</button>

Answer 1

您可以使用 jsPDF 和 dom to image 包导出带有 id='dashboard' 的 HTML div。

安装包

import * as domtoimage from 'dom-to-image';
import * as FileSaver from 'file-saver';
import * as jsPDF from 'jspdf';

TS文件

domtoimage.toPng(document.getElementById('dashboard'))
    .then(function (blob) {
        var pdf = new jsPDF('l', 'pt', [$('gridster').width(), $('gridster').height()]);
        pdf.addImage(blob, 'PNG', 0, 0, $('gridster').width(), $('gridster').height());
        pdf.save(`${that.dashboardName}.pdf`);
    });

HTML

<gridster id='dashboard'></gridster>