Angular 6（jsPDF 和 jsBarcode）中的 PDF 不显示条形码

Question

我想将我的 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;
}

在我的网络应用程序页面上一切正常：

但在PDF条码上只显示了一部分

Answer 1

尝试 canvg 将 SVG 转换为 Canvas。然后使用 .toDataURL().

将 canvas 转换为 base64 字符串

更详细的答案在这里

并在此处进行演示 enter link description here

Note that this means the SVG is converted to a bitmap before being integrated into the PDF, so you'll lose the benefits of a vector format

Answer 2

我的回答，现在有效了。

我已经更改了我的 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);`

Angular 6（jsPDF 和 jsBarcode）中的 PDF 不显示条形码

Barcode doesn't shown on PDF in Angular 6 (jsPDF & jsBarcode)

jspdf

angular

jsbarcode