使用 angular 将 Ag-Grid 导出为 PDF 7

Question

我正在使用 Angular 7，我正在尝试将 ag-grid 导出为 pdf。我知道如何导出到 csv 和 excel。问题是，当我尝试导出为 pdf 时，我在文档中唯一能找到的就是如何打印。

有人有这方面的经验吗？

Answer 1

据我所知，PDF 导出不是 ag-grid 的功能。你将不得不自己实施它。根据您的环境，在服务器端执行此操作可能最简单。

Answer 2

pdfMake 与用于 PDF 导出的 ag-Grid 集成良好。它要求您生成一个二维数组，其中包含要打印为 PDF 的所有列和行值 table。

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

您甚至可以设置样式选项，使导出的 table 看起来就像 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 将 Ag-Grid 导出为 PDF 7

Exporting Ag-Grid to PDF using angular 7

pdf

ag-grid

angular

ag-grid-angular