Штрих-код не отображается в PDF в Angular 6 (jsPDF и jsBarcode) - PullRequest
Новая
       38

Штрих-код не отображается в PDF в Angular 6 (jsPDF и jsBarcode)

0 голосов
/ 26 декабря 2018

Я хочу напечатать свой HTML в PDF.Все почти нормально, но штрих-код отображается правильно только на странице моего веб-приложения, но в PDF-файле, показанном частично, я не знаю, почему.

мой HTML-код 

<div *ngIf="flight" #content>
<div>
<label>departureCity: </label> {{flight.departureCity}}
</div>
<div>
<label>destinationCity: </label> {{flight.destinationCity}}
</div>
<label>List of tickets: </label>
<div *ngFor="let ticket of flight.tickets">
<label>Name: </label> {{ ticket.name }}<br/>
<label>Surname: </label> {{ ticket.surname }}<br/>
</div>
<svg id="barcode1"></svg>
<hr/>
</div>
<button (click)="downloadPDF()"> Download </button>

моя машинописькод 

@ViewChild('content') content: ElementRef;
public downloadPDF() {
const doc = new jsPDF(this.getBarcode());

const specialElementHandlers = {
  '#editor': function(element, renderer) {
    return true;
  }
};
const content = this.content.nativeElement;
doc.fromHTML(content.innerHTML, 15, 15, {
  'width': 190,
  'elementHandlers': specialElementHandlers
 });
doc.save('Test.pdf');
}

getBarcode() {
JsBarcode('#barcode1', this.getOrderNumber(), {
  format: 'CODE128',
  displayValue: true,
    <!---->
});
}

getOrderNumber() {
const number = 'R' + Math.floor(Math.random() * 100000000000);
return number;
}

На моей странице веб-приложения все в порядке:

enter image description here

Но на штрих-коде PDF, показанном только частично

enter image description here

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Мой ответ, теперь это работает.

Я изменил свой HTML-код:

<canvas id="barcode"></canvas>

И добавьте это в мой машинописный код: 

const canvas = document.getElementById('barcode') as HTMLCanvasElement;
const jpegUrl = canvas.toDataURL('image/jpeg');
doc.addImage(jpegUrl, 'JPEG', 20, 150, 50, 50);`
0 голосов
/ 26 декабря 2018

Попробуйте canvg , чтобы конвертировать SVG в Canvas.Затем преобразуйте холст в строку base64, используя .toDataURL().

Более подробный ответ здесь https://stackoverflow.com/a/35788928/2090459

И Демо здесь введите описание ссылки здесь

Обратите внимание, что это означает, что SVG преобразуется в растровое изображение перед его интеграцией в PDF, поэтому вы потеряете преимущества векторного формата

...