无论如何都没有打印任何完全适合A4纸的ag-grid尺寸吗？

Question

I have a big ag-grid looks like below

Somehow I should get PDF export of this and being able to print (both A4 paper size).I've reviewed AG-Grid documentation to find something useful here what I came up with below

 onBtPrinterFriendly() {
    var eGridDiv = document.querySelector('#myGrid');
    eGridDiv.style.width = '';
    eGridDiv.style.height = '';
    this.gridApi.setDomLayout('print');
    print();
  }
  onBtNormal() {
    var eGridDiv = document.querySelector('#myGrid');
    eGridDiv.style.width = '400px';
    eGridDiv.style.height = '200px';
    this.gridApi.setDomLayout(null);
  }

These two methods can change grid size to print on desired format.But I can't make my grid smaller diagonally to fit paper size.It justs crops the right side of my grid so looks like this

Doesn't matter how small that would be,just I wanna put it compeletely A4 paper(vertically).Isn't there anyway to achieve this?I'm also thinking about making a simple HTML table versiton without margins and paddings to fit into paper but that would be too much work so looking for better and easier way if exists.

Plunker example: https://plnkr.co/edit/rVPswsaknukOkhf5

Answer 1

Use the sizeColumnsToFit function on the grid API to fit all the columns within the grid, then print.

onBtPrinterFriendly() {
    var eGridDiv = document.querySelector('#myGrid');
    eGridDiv.style.width = '';
    eGridDiv.style.height = '';
    this.gridApi.sizeColumnsToFit();
    this.gridApi.setDomLayout('print');
    print();
  }

Demo .

Answer 2

agGrid rows have a high line-height value in their css so they don't actually go back to line automatically. which would result in a lot of ellipses and a harder table to read and print in your case.

In the time of printing (If you don't need it somewhere else) you can add class to all cells via the defaultColDef that would force the cells to take at least 2 lines of data. this way you can make the columns less wide.

defaultColDef: {
        ....

        cellClass: 'cell-wrap-text',
       
        ....
}

.cell-wrap-text{
  white-space: normal !important;
  line-height: 23px !important;
}

using that and with the sizeColumnsToFit() and setDomLayout('print') methods would give you a better result.

Also if you are not using infinite mode on agGrid you can easily set the row height to something fixed or do that programmatically via the API (based on the text content inside the cells for that row).