Как конвертировать HTML в PDF в угловой 6 при использовании привязки - PullRequest
0 голосов
/ 01 октября 2018

Я преобразовал HTML в PDF в угловую, но проблема в том, что я использую привязку для отображения всего списка.Я использую представление списка в цикле PDF, преобразуйте только одно представление списка, оно не может преобразовать весь список в PDF. Как этого добиться?

pdf.ts:

export class PDFComponent{

 @ViewChild('content') content:ElementRef;
  test:any;

 downloadPdf() {
  let doc= new jspdf();
  let specialElememtHandlers = {
    '#editor':function(element,renderer)
    {
      return true;
    }    
  };
  let content =this.content.nativeElement;
  doc.fromHTML(content.innerHTML,15,15, {
    'width':190,
    'elementHandlers':specialElememtHandlers
  });
  doc.save('test.pdf');
  }
}

pdf.html:

  <button class="btn btn-sm btn-white m-b-10 p-l-5" (click)="downloadPDF()"></button>
<ul class="result-list" *ngFor="let reg of test
        id="content" #content>
        <li>
          <div class="result-price" style="background:center #2d353c;color: #fff;">
            <h3 style="color: #fff">{{reg.id}}</h3>
            <h4 style="color: #fff">{{reg.date}}</h4>
            <p>
              <small>
                <b>{{reg.implication}}</b>
              </small>
            </p>
          </div>
          <div class="result-info">
            <h4 class="title">
              {{reg.title}}
            </h4>
            <br>
            <p class="desc">
              <b>Summary:</b> {{reg.desc}}
            </p>    
             </div>             
        </li>          
      </ul>

1 Ответ

0 голосов
/ 01 октября 2018

Я думаю, что проблема может заключаться в том, что ваш дублирующий элемент цикла ngFor <ul id="content"> в результате у вас есть несколько элементов с одинаковым идентификатором.Затем Вы хотите получить содержимое элемента по этому дублированному идентификатору.Это даст вам только первое найденное на странице.

Попробуйте обернуть ваш цикл в элемент div и получить содержимое этого div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...