我正在开发发票APP。我已经在DIV类HTML中生成了一张发票。我想将此div类导出为PDF
当我打开PDF时,我会看到一个白页,并且PDF会继续加载:在此处输入图片描述
这是我的代码:component.show.ts
import { Component, OnInit } from '@angular/core';
import { BasicRequestsService } from '../../../../../core/services/basic-requests.service';
import { ActivatedRoute } from '@angular/router';
import { Observable, forkJoin } from 'rxjs';
import { FormsModule, FormBuilder } from '@angular/forms';
import { DatePipe } from '@angular/common';
import * as jsPDF from 'jspdf';
import { ElementRef, ViewChild} from "@angular/core";
import { ToastsService } from '../../../../../core/services/toasts.service';
import { Pipe, PipeTransform } from '@angular/core';
@Component({
selector: 'app-tools-billing-invoices-show',
templateUrl: './show.component.html',
styleUrls: ['./show.component.scss', '../invoices.component.scss']
})
export class InvoicesShowComponent implements OnInit {
endpoint = '/tools/billing/billers/';
billerId;
billerData;
invoiceId;
invoice;
invoiceUpdated;
invoiceLines;
invoiceForm;
clientData;
symbol;
invoiceTotal = {taxExcluded: 0, tax: 0, taxIncluded: 0};
date: Date;
constructor(
private basicRequestsService: BasicRequestsService,
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private toasts: ToastsService,
) { }
createPdf(): void {
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("invoice-preview-box")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
}
}
这是我的HTML
<button class="dropdown-item" (click)="createPdf()">Generate PDF</button>
<div class="col-xl-9 invoice-preview-box" tag="invoice-preview-box" id="invoice-preview-box"> Hello World, here is MY PDF </div>
您能不能偶然发现我的代码有什么问题?