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

Posted 2023-03-28

【中文标题】在vue js中将ag网格表转换为PDF文件

【英文标题】：Convert ag grid table to PDF file in vue js

【发布时间】：2021-04-05 08:04:13

【问题描述】：

我想将 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('clas-s-room report.pdf');
        ,
        x: 10,
        y: 10
    );
  ,

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

【问题讨论】：

您是在生成pdf时遇到问题还是下载生成的pdf时出现问题？我猜你不能 doc.save('filename.pdf') 因为你在浏览器中运行它，也许这个线程可能会有所帮助：***.com/questions/17739816/…

下载没问题。我使用时生成的pdf为空白 - this.$refs.content.innerHTML

也许先尝试一个简单的 html，比如 '

Hello

' 并检查 dompdf 是否要成功生成 pdf .

是的，带有静态数据的简单 html 表可以工作，但在 ag-grid 的情况下，它是空白的

也许我们可以得到一个ag-grid的输出样本，也许它使用了dompdf不知道如何处理的标记......

【参考方案1】：

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