Может ли QR-код быть сгенерирован и экспортирован в pdf без преобразования в html в angular 6 - PullRequest
Новая
       9

Может ли QR-код быть сгенерирован и экспортирован в pdf без преобразования в html в angular 6

0 голосов
/ 19 марта 2020

Я хочу экспортировать QR-код в PDF, используя jsPDF, не показывая его в html. Я пробовал так много библиотек - qrcode, angularx-qrcode.

1 Ответ

0 голосов
/ 19 марта 2020

Вы можете использовать ngx-qrcode для генерации QR-кода. И оттуда вставьте QR-код в свой шаблон, получите его обратно и распечатайте. 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

Структура ngx-qrcode в DOM выглядит следующим образом: 

<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, содержащего QR-код.

Рабочий пример: Stackblitz

...