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

【问题标题】：Convert ag grid table to PDF file in vue js在vue js中将ag网格表转换为PDF文件
【发布时间】：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('classroom report.pdf');
        },
        x: 10,
        y: 10
    });
  },

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

【问题讨论】：

您是在生成pdf时遇到问题还是下载生成的pdf时出现问题？我猜你不能 doc.save('filename.pdf') 因为你在浏览器中运行它，也许这个线程可能会有所帮助：stackoverflow.com/questions/17739816/…
下载没问题。我使用时生成的pdf为空白 - this.$refs.content.innerHTML
也许先尝试一个简单的 html，比如 '
Hello
' 并检查 dompdf 是否要成功生成 pdf .
是的，带有静态数据的简单 html 表可以工作，但在 ag-grid 的情况下，它是空白的
也许我们可以得到一个ag-grid的输出样本，也许它使用了dompdf不知道如何处理的标记......

标签： laravel vue.js pdf vue-component ag-grid

【解决方案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

【讨论】：