1

我正在使用Angular 6. 我在这里找到了一个问题，但没有公认的答案。我也尝试了一些代码，并且正在进行 PDF 导出。但我的问题是没有导出一个特定的图表。

来自 Angular 应用程序的屏幕截图：

在此处输入图像描述

但是当我将其导出为 PDF 时，会导出饼图，但不会导出正常指标，即 25。25 不仅是一个值，它还是一种称为 的图形indicator widget。

导出的 PDF 截图：

在此处输入图像描述

这是我的代码：

服务（打字稿）：

import html2canvas from "html2canvas";
import { PdfExportHelper } from "./pdf-export-helper";
...

@Injectable({
  providedIn: "root",
})
export class WidgetsExportService {
  private readonly options = {
    backgroundColor: "#ffffff",
    logging: false,
  };

  private _exportCardSubject$ = new Subject<CardPdfConfig>();

  constructor(
    @Inject(DOCUMENT) private document
  ) {}

  ...

  public exportCard(
    originalContent: HTMLElement,
    ...
  ) {
    this.globalProgressService.showProgress();
    this.doExportCard(
      originalContent,
      ...
    );
  }

  ...

  private getContentRows(originalContent: HTMLElement): HTMLElement[] {
    return Array.from(
      originalContent.querySelectorAll("#overview-dashboard > .content-row")
    );
  }

  private doExportCard(
    originalContent: HTMLElement,
    ...
  ) {
    const pagePromises: Promise<HTMLCanvasElement>[] = [];
    const pageWrappers: HTMLElement[] = [];
    const clonedContent: HTMLElement = originalContent.cloneNode(
      true
    ) as HTMLElement;
    const rowWidthWithPadding = originalContent.offsetWidth + 26;
    const rowHeightWithPadding = originalContent.offsetHeight + 26;
    const wrapper: HTMLElement = this.createWrapper(
      rowWidthWithPadding,
      rowHeightWithPadding
    );
    wrapper.appendChild(clonedContent);
    this.addWrapperToDocument(wrapper);
    pagePromises.push(html2canvas(wrapper, this.options));
    pageWrappers.push(wrapper);

    const headerFooterWrapper: HTMLElement = this.createWrapper(1300);
    pageWrappers.push(headerFooterWrapper);

    this.createHeaderFooter(headerFooterWrapper, headerConfig, filterMap);

    Promise.all([
      html2canvas(document.getElementById("pdf-header")),
      html2canvas(document.getElementById("pdf-filters")),
    ])
      .then(([headerCanvas, filtersCanvas]) => {
        const copyrightText = headerConfig.copyrightText;
        headerFooterWrapper.appendChild(
          this.createFooter(1, 1, copyrightText, formattedDate)
        );
        pagePromises.push(
          html2canvas(document.getElementById("pdf-footer" + 1))
        );
        this.renderPages(
          pagePromises,
          fileName,
          headerCanvas,
          filtersCanvas,
          pageWrappers,
          pdfPassword
        );
      })
      .catch((e) => {
        this.removeWrappersFromDocument(pageWrappers);
        throw new Error(e);
      });
  }
}

忽略颜色。我只需要一个小部件也被覆盖。请帮忙。

4

0 回答 0