Angular 9从div类生成PDF时出现问题

时间:2020-02-19 14:04:34

标签: javascript angular

我正在开发发票APP。我已经在DIV类HTML中生成了一张发票。我想将此div类导出为PDF

当我打开PDF时,我会看到一个白页,并且PDF会继续加载:在此处输入图片描述

以下是屏幕截图: at

这是我的代码: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>

您能不能偶然发现我的代码有什么问题?

0 个答案:

没有答案