时间戳

首页 > 解决方案 > 在vue js中将ag网格表转换为PDF文件

laravel - 在vue js中将ag网格表转换为PDF文件

问题描述

我想将 ag-grid 表转换为 pdf 文件并导出。出于这个原因，我使用“jspdf”库。但是现在我无法将 ag-grid 表格内容放入我的 pdf 中。

这是我的 ag-grid 表格部分

<button @click="createPDF">Download PDF</button>

        <div ref="content" id="pdfTable" >
                <ag-grid-vue
                  ref="agGridTable"
                  :components="components"
                  :gridOptions="gridOptions"
                  class="ag-theme-material w-100 my-4 ag-grid-table"
                  :columnDefs="columnDefs"
                  :defaultColDef="defaultColDef"
                  :rowData="usersData"
                  rowSelection="multiple"
                  colResizeDefault="shift"
                  :animateRows="true"
                  :floatingFilter="true"
                  :pagination="true"
                  :paginationPageSize="paginationPageSize"
                  :suppressPaginationPanel="true"
                  :enableRtl="$vs.rtl">
                </ag-grid-vue>
      </div>

在方法中：部分

 createPDF (){
    const doc = new jsPDF();
    doc.html(this.$refs.content.innerHTML, {
        callback: function (doc) {
          doc.save('classroom report.pdf');
        },
        x: 10,
        y: 10
    });
  },

我可以使用 jspdf 打印静态文本，但无法打印 ag-grid 表数据。还有其他简单的库可以用来将 ag-grid 表导出为 pdf 吗？

标签： laravelvue.jspdfvue-componentag-grid

解决方案

pdfMake 与 ag-Grid 很好地集成。

您可以利用 ag-Grid API 生成包含要导出的列和行的二维数组：

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

请参阅 vue.js 中的此示例：

https://stackblitz.com/edit/vue-ag-grid-pdf-make?file=index.js

推荐阅读