Convert ag grid table to PDF file in vue js

Question

I want to convert ag-grid table to pdf file and export it. For this reason I use "jspdf" library. But now I can't place ag-grid table contents into my pdf.

Here is my ag-grid table portion

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

and in methods: portion

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

I can print static text using jspdf, but can't print ag-grid table data. Also Is there any other easy library that I can use to export ag-grid table as pdf?

do you have a problem generating the pdf or is it a problem of downloading the generated pdf? I guess you can't doc.save('filename.pdf') because you are running it inside the browser, maybe this thread may help: https://stackoverflow.com/questions/17739816/how-to-open-generated-pdf-using-jspdf-in-new-window#18098815 — Joshua Angnoe, Dec 28 '20 at 17:20
no problem of downloading. the generated pdf is blank when i use - this.$refs.content.innerHTML — Md. Shamvil Hossain, Dec 28 '20 at 17:37
Maybe try a simple html first, something like '' and check if dompdf wants to generate a pdf succesfully.
Hello — Joshua Angnoe, Dec 28 '20 at 17:40
Yes, Simple html table with static data working but in case of ag-grid, its blank — Md. Shamvil Hossain, Dec 28 '20 at 17:42
Maybe we can get a sample of the output of ag-grid, maybe it uses markup that dompdf does not know how to deal with... — Joshua Angnoe, Dec 28 '20 at 18:07

ahmedg94 · Answer 1 · 2021-04-07T11:44:29.327

pdfMake integrates well with ag-Grid.

You can leverage the ag-Grid API to generate a 2D array containing the columns and rows to be exported:

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

See this example in vue.js:

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

Convert ag grid table to PDF file in vue js

1 Answers1