生成导出 pdf 按钮时页面变得无响应

Question

将页面导出为 pdf 时页面变得无响应，请参阅下面的屏幕截图。

这是 stackblitz 代码：以下代码用于将图表转换为图像，这会导致性能问题。

  private convertChartToPng(listOfCharts: any, reportLayoutElement: any) {
for (let i = 0; i < listOfCharts.length; i++) {
  const chartCtrlId = '#' + listOfCharts[i].id;
  const chartElementRef = reportLayoutElement.querySelector(chartCtrlId);

  this.convertChartToImg(chartCtrlId).subscribe((image) => { // It is taking more time to convert chart to image which sometimes makes the page unresponsiveness

    const pngImgage = document.createElement('img');
    pngImgage.src = image;
    chartElementRef.innerHTML = '';
    chartElementRef.appendChild(pngImgage);
    this.validateChartsRenderedAndGeneratePdf(
      i,
      listOfCharts,
      reportLayoutElement
    );
  });
}

}

请帮助我解决页面无响应错误。

预期结果：生成 pdf 时不应显示页面无响应错误。

Answer 1

请替换以下函数：

 private convertChartToPng(listOfCharts: any, reportLayoutElement: any) {
    const processChunk = (index: number) => {
      if (index < listOfCharts.length) {
        const chartCtrlId = '#' + listOfCharts[index].id;
        const chartElementRef = reportLayoutElement.querySelector(chartCtrlId);
        this.convertChartToImg(chartCtrlId).subscribe((image) => {
          const pngImgage = document.createElement('img');
          pngImgage.src = image;
          chartElementRef.innerHTML = '';
          chartElementRef.appendChild(pngImgage);
          this.validateChartsRenderedAndGeneratePdf(
            index,
            listOfCharts,
            reportLayoutElement
          );
          setTimeout(() => processChunk(index + 1), 0);
        });
      }
    };
    processChunk(0);
  }