Функциональность печати диаграмм PrimeNG - PullRequest
Новая
       16

Функциональность печати диаграмм PrimeNG

0 голосов
/ 13 марта 2019

У меня была интересная задача, где я должен был создать функцию печати для диаграммы PrimeNG, я пытаюсь найти некоторые полезные комментарии или статьи по этому поводу, но я ничего не нашел.

Через пару часов я могу это сделать, и я пишу этот комментарий для помощи людям, у которых возникнут аналогичные проблемы. Например, у вас есть такая диаграмма ( Компонент с диаграммой ), и вам нужно распечатать эту диаграмму, если пользователь нажмет кнопку Print.

chart.component.html 

<p-chart type="line" [data]="data #chart></p-chart>
<button (click)="print()">Print</button>

chart.component.html 

export class PipelineChartComponent {
  public data: any;
  @ViewChild('chart') public primeChart: UIChart;

/**
   * Open printing window, convert chart in image.
   */
  public print(): void {
    const windowPort = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');

    const printDom = `
      <html>
        <head>
          <title>${'Report'}</title>
        </head>
        <body>

            <div class="content">
                <img src="${this.primeChart.getBase64Image()}" alt="${this.translateService.instant('pipeline.chart.title')}" />
            </div>

        </body>
      </html>`;

    windowPort.document.write(printDom);
    windowPort.document.close();
    windowPort.focus();
    windowPort.print();
  }
}

Окончательный результат -> Печать этого графика

...