Angular 6 (jsPDF & jsBarcode) 中的 PDF 不显示条形码答案

【问题标题】：Barcode doesn't shown on PDF in Angular 6 (jsPDF & jsBarcode)Angular 6 (jsPDF & jsBarcode) 中的 PDF 不显示条形码
【发布时间】：2018-12-25 21:52:26
【问题描述】：

我想将我的 HTML 打印为 PDF。几乎一切正常，但条形码仅在我的 Web 应用程序页面上正确显示，但在部分显示的 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;
}

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

但在仅部分显示的 PDF 条码上

【问题讨论】：

标签： angular jspdf jsbarcode

【解决方案1】：

我的回答，现在可以了。

我的 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);`

【讨论】：

【解决方案2】：

尝试 canvg 将 SVG 转换为 Canvas。然后使用.toDataURL().将画布转换为base64字符串

更详细的答案在这里https://stackoverflow.com/a/35788928/2090459

这里有演示enter link description here

请注意，这意味着 SVG 在被转换为位图之前集成到 PDF 中，因此您将失去矢量的好处格式

【讨论】：