Использование Angular 9, Как напечатать jspdf из элемента html при обновлении значений в html с использованием интерполяции - PullRequest
Новая
       16

Использование Angular 9, Как напечатать jspdf из элемента html при обновлении значений в html с использованием интерполяции

0 голосов
/ 26 апреля 2020

Html template 

  <div id="download">
    <div>
      {{name}}
    </div>
  </div>

<button type="button" class="btn btn-primary" (click)="captureScreen()">Download</button>

Component.ts: 

  public name = 'Sample';

  captureScreen() {
    this.name = "something else";
    var img;
    var newImage;
    let filename = 'mypdf_'+'.pdf';
    var node = document.getElementById('download');
      domtoimage.toPng(node, { bgcolor: '#fff' }).then(function (dataUrl) {

        img = new Image();
        img.src = dataUrl;
        newImage = img.src;

        img.onload = function () {
          var pdfWidth = img.width;
          var pdfHeight = img.height;
          var doc;
          doc = new jspdf('l', 'px', [pdfWidth, pdfHeight]);

          var width = doc.internal.pageSize.getWidth();
          var height = doc.internal.pageSize.getHeight();

          doc.addImage(newImage, 'PNG', 10, 10, width, height);
          doc.save(filename);

        };

      }).catch(function (error) { });
    }

Этот код отлично работает для предварительно установленного значения в поле имени. Я хочу провести l oop через список имен и распечатать новую страницу для каждого имени в pdf. Но в настоящее время, если я изменяю значение this.name = "что-то еще"; оно все равно выводит имя как ' Sample ' в pdf.

Как сделать Я изменяю значение имени на go и печатаю pdf для разных имен?

1 Ответ

0 голосов
/ 26 апреля 2020

1) Проблема в том, что вы пытаетесь использовать document.getElementById('download'), чтобы запросить новый элемент, который уже отрисован, он по-прежнему отображает старый элемент. Вы должны убедиться, что сначала визуализируете новый элемент. 2) Рекомендовать запросить элемент с помощью ViewChild в angular.

Вот мое предложение 

<!-- Use element reference #download to query native element -->
<div #download>
  <div>
    {{name}}
  </div>
</div>
<input type="text" (keyup)="changeElementText($event.target.value)">
<button type="button" class="btn btn-primary" 
(click)="captureScreen()">Download</button>

В файле TS 

 name = 'Sample';

@ViewChild('download', {read: ElementRef})
download: ElementRef;

// Add a modify element logic, make sure modify element and render it before capture screen.
changeElementText(value: string) {
  this.name = value;
}

captureScreen() {
  let img;
  let newImage;
  const filename = 'mypdf_'+'.pdf';
  // This should provide you latest element.
  const node = this.download.nativeElement;
  console.log(node);
  /*** Your capture logic  ***/
}

демонстрация stackbliz

...