Question

我正在使用Angular 2中的AG-GRID。我发现只有一个选项可以将网格导出到Excel中。

如何将网格导出为PDF？

Answer 1

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

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

Answer 2

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

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

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

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

Answer 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;

以角度看下面的例子：

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

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

3 个答案: