是否可以在 Angular 6 中生成 QR 码并将其导出为 pdf，而不将其渲染为 html

Question

我想使用 QR 码将其导出为 pdf，jsPDF而不在 html 中显示。我尝试了很多库qrcode- , angularx-qrcode.

Answer 1

您可以使用ngx-qrcode生成二​​维码。然后将二维码嵌入到您的模板中，然后将其检索并打印。QR 码仍然在 DOM 中，但可以使用 CSS 隐藏。尝试以下操作

成分

export class AppComponent implements OnInit {
  qrvalue = 'embedded qr';

  ngOnInit() {
  }

  getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
  }

  download() {
    const qrcode = document.getElementById('qrcode');
    let doc = new jsPDF();

    let imageData= this.getBase64Image(qrcode.firstChild.firstChild);
    doc.addImage(imageData, "JPG", 10, 10);

    doc.save('FirstPdf.pdf');
  }
}

模板

<div class="container">
  <ngx-qrcode id="qrcode" [ngStyle]="{'display': 'none'}"  [qrc-element-type]="'img'" [qrc-value]="qrvalue">
  </ngx-qrcode>
  <button (click)="download()" class="btn btn-primary">Download PDF</button>
</div>

解释firstChild.firstChild

DOM中的结构ngx-qrcode如下

<ngx-qrcode _ngcontent-c2="" id="qrcode" style="display: block;" ng-reflect-ng-style="[object Object]" ng-reflect-element-type="img" ng-reflect-value="embedded qr">
  <div class="qrcode">\
    <img src="data:image/png;base64,iVBORw0KGgoAAAANS...">
  </div>
</ngx-qrcode>

所以我们用来document.getElementById('qrcode').firstChild.firstChild检索img包含二维码的标签。

工作示例：Stackblitz