Question

我有一个有趣的任务，我应该为primeNG图表创建打印功能，我试图找到一些对此有用的评论或文章，但是我什么都没找到。

几个小时后，我可以做得到，我写这篇评论是为了帮助那些会遇到类似问题的人。例如，您有这样的图表（Component with chart），并且如果用户单击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();
  }
}

最终结果-> Printing this chart

PrimeNG图表打印功能

0 个答案: