0

I am working with ag-grid and I need to make a screenshot using html2canvas. When the table has vertical overflow it exceeds the container.

I tried changing the overflow property to hidden before exporting and still it fails. Do we have any workaround to achieve this?

hosted the sample in github https://dharanbro.github.io/sample/

<html>
<head>
    <!-- reference the ag-Grid library-->
    <script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

    <!-- our application code -->
    <script>
        // specify the columns
        var columnDefs = [
            {headerName: "Make", field: "make"},
            {headerName: "Model", field: "model"},
            {headerName: "Price", field: "price"}
        ];
        // specify the data
        var rowData = [
            {make: "Toyota", model: "Celica", price: 35000},
            {make: "Ford", model: "Mondeo", price: 32000},
            {make: "Porsche", model: "Boxter", price: 72000},
            {make: "Toyota", model: "Celica", price: 35000},
            {make: "Ford", model: "Mondeo", price: 32000},
            {make: "Porsche", model: "Boxter", price: 72000},
            {make: "Toyota", model: "Celica", price: 35000},
            {make: "Ford", model: "Mondeo", price: 32000},
            {make: "Porsche", model: "Boxter", price: 72000}
        ];
        // let the grid know which columns and what data to use
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: rowData,
            onGridReady: function (params) {
                params.api.sizeColumnsToFit();
            }
        };
        // wait for the document to be loaded, otherwise
        // ag-Grid will not find the div in the document.
        document.addEventListener("DOMContentLoaded", function() {
            // lookup the container we want the Grid to use
            var eGridDiv = document.querySelector('#myGrid');
            // create the grid passing in the div to use together with the columns & data we want to use
            new agGrid.Grid(eGridDiv, gridOptions);
        });

        function completeSnap(){
            html2canvas(document.body).then(function(canvas) {
                document.body.appendChild(canvas);
            });
        }
        function tableSnap(){
            html2canvas(document.getElementById("myGrid")).then(function(canvas) {
                document.body.appendChild(canvas);
            });
        }
    </script>
</head>
<body>
<h1>Simple ag-Grid Example</h1>

<!-- the div ag-Grid will use to render it's data -->
<div id="myGrid" style="height: 115px;width:500px" class="ag-theme-fresh"></div>

<button onclick="completeSnap()">Snap IT</button>
<button onclick="tableSnap()">Table IT</button>

</body>
</html>

using the latest version on html2canvas (https://html2canvas.hertzen.com/dist/html2canvas.js).

enter image description here

dharanbro
  • 1,327
  • 4
  • 17
  • 40

1 Answers1

0

html2canvas is not screenshoting the page, it will regenerate the entire DOM that you have requested. Somehow their plugin not works as well (often) on some DOM style properties. See this page for explanation.

Try this one, based on your question, this code will work

document.getElementById("myGrid").style.overflow = 'hidden';
html2canvas(document.getElementById("myGrid")).then(function(canvas) {
    document.body.appendChild(canvas);
});

But, if you want to get all results, you can use this one.

document.getElementById("myGrid").style.height = 'auto';
document.getElementById("myGrid").style.overflow = 'show';
html2canvas(document.getElementById("myGrid")).then(function(canvas) {
    document.body.appendChild(canvas);
});

Cheers

aswzen
  • 1,512
  • 29
  • 46