Angular Создание документа PDF из класса DIV в HTML - PullRequest
Новая
       0

Angular Создание документа PDF из класса DIV в HTML

0 голосов
/ 30 января 2020

Я работаю над приложением Invoicing с angular.

Внутри класса DIV я сгенерировал предварительный просмотр своего счета.

Я хочу иметь возможность создавать PDF файл из этого класса Div. Является ли это возможным? У вас есть подсказка? Что бы по-другому?

С уважением Матье

Ответы [ 2 ]

0 голосов
/ 19 февраля 2020

Когда я открываю свой PDF, у меня появляется белая страница, и файл PDF продолжает загружаться: enter image description here

Вот мой код: 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 голосов
/ 30 января 2020

jsPDF умеет использовать плагины. Для того, чтобы он мог печатать HTML, вы должны включить определенные плагины и, следовательно, должны сделать следующее: Go до https://github.com/MrRio/jsPDF и загрузить последнюю версию.

Включите в свой проект следующие сценарии: 

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

Если вы хотите игнорировать определенные элементы, вы должны пометить их идентификатором, который затем можно игнорировать в специальном обработчике элементов jsPDF. Поэтому ваш HTML должен выглядеть следующим образом: 

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

Затем вы используете следующий код JavaScript, чтобы открыть созданный PDF во всплывающем окне: 

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    }
);

doc.output("dataurlnewwindow");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...