如何在 Angular 2 中将 Ag-Grid 导出为 PDF 格式？答案

【问题标题】：How to Export Ag-Grid to PDF Format in Angular 2?如何在 Angular 2 中将 Ag-Grid 导出为 PDF 格式？
【发布时间】：2018-04-01 11:27:12
【问题描述】：

我正在 Angular 2 中处理 AG-GRID。我发现有一个选项只能将网格导出到 Excel。

如何将网格导出为 PDF？

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

在保持样式的同时导出为 pdf 是一项非常棘手的任务，并且有一些选项可以满足您的需求。

html2pdf：这会将 html 转换为画布，然后从画布转换为图像，然后从图像转换为 pdf。问题是这种实现往往会产生低分辨率的图像。
jsPdf：这个库是一个 js 实现，因此不包括页面样式。样式必须使用jsPdf 单独添加，并且有点受限，因此重新创建AG_GRID 生成的相当复杂的设计需要大量工作。
phantomjs：这是一个 Api 提供屏幕捕获功能的无头 Bowser。 rastersize 是一个实现示例，可以通过创建一个调用 phantomjs 的队列将其集成到应用程序中。

【讨论】：

【解决方案2】：

您可以打印网格数据。 Chrome 为您提供了将其保存为 pdf 的选项。但是，您可能在页面中有其他 html 元素，您可能不想成为 PDF（或打印）的一部分。所以：

在单独的页面中渲染网格（您可以转移网格状态对象到单独的组件以呈现完全相同的网格视图（排序、过滤等）。
调用网格函数api.setDomLayout('print');
致电window.print()。
将他重定向回上一页。

我已经编写了一个示例代码（仅作为示例，根据需要进行调整）： https://stackblitz.com/edit/angular-ag-grid-pdf

您可以使用宽度来填充页面。

【讨论】：

，你写的代码很好，我需要java脚本代码而不是类型脚本，请
它将只打印页面和网格的可见区域。如果网格有滚动条和看不见的数据，它不会包含在 pdf 打印中。谢谢

【解决方案3】：

pdfMake 与 ag-Grid 很好地集成。您只需创建一个包含所有列标题和行中的值的二维数组。

function getColumnsToExport() {
    let columnsToExport = [];

    agGridColumnApi.getAllDisplayedColumns().forEach(col => {
      let pdfExportOptions = getPdfExportOptions(col.getColId());
      if (pdfExportOptions && pdfExportOptions.skipColumn) {
        return;
      }
      let headerCell = createHeaderCell(col);
      columnsToExport.push(headerCell);
    });

    return columnsToExport;
  }

  function getRowsToExport(columnsToExport) {
    let rowsToExport = [];

    agGridApi.forEachNodeAfterFilterAndSort(node => {
      if (PDF_SELECTED_ROWS_ONLY && !node.isSelected()) {
        return;
      }
      let rowToExport = columnsToExport.map(({ colId }) => {
        let cellValue = agGridApi.getValue(colId, node);
        let tableCell = createTableCell(cellValue, colId);
        return tableCell;
      });
      rowsToExport.push(rowToExport);
    });

    return rowsToExport;
  }

您甚至可以定义样式选项，使导出的表格看起来像 ag-Grid：

PDF_HEADER_COLOR = "#f8f8f8";
PDF_INNER_BORDER_COLOR = "#dde2eb";
PDF_OUTER_BORDER_COLOR = "#babfc7";
PDF_HEADER_HEIGHT = 25;
PDF_ROW_HEIGHT = 15;
PDF_ODD_BKG_COLOR = "#fcfcfc";
PDF_EVEN_BKG_COLOR = "#ffffff";

const heights = rowIndex =>
      rowIndex < headerRows ? PDF_HEADER_HEIGHT : PDF_ROW_HEIGHT;

    const fillColor = (rowIndex, node, columnIndex) => {
      if (rowIndex < node.table.headerRows) {
        return PDF_HEADER_COLOR;
      }
      return rowIndex % 2 === 0 ? PDF_ODD_BKG_COLOR : PDF_EVEN_BKG_COLOR;
    };

    const hLineWidth = (i, node) =>
      i === 0 || i === node.table.body.length ? 1 : 1;

    const vLineWidth = (i, node) =>
      i === 0 || i === node.table.widths.length ? 1 : 0;

    const hLineColor = (i, node) =>
      i === 0 || i === node.table.body.length
        ? PDF_OUTER_BORDER_COLOR
        : PDF_INNER_BORDER_COLOR;

    const vLineColor = (i, node) =>
      i === 0 || i === node.table.widths.length
        ? PDF_OUTER_BORDER_COLOR
        : PDF_INNER_BORDER_COLOR;

请参见下面的 Angular 示例：

https://stackblitz.com/edit/angular-ag-grid-pdf-make?file=src%2Findex.html

【讨论】：