Question

我正在使用ag-grid，我需要使用html2canvas制作屏幕截图。当表有垂直溢出时，它超过了容器。

我尝试在导出之前将overflow属性更改为hidden，但仍然失败。我们有解决方法吗？

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

在html2canvas上使用最新版本（https://html2canvas.hertzen.com/dist/html2canvas.js）。

Answer 1

html2canvas没有截断页面，它将重新生成您请求的整个DOM。不知何故，他们的插件在某些DOM样式属性上（通常）不能正常工作。有关说明，请参阅此page。

尝试这个，根据您的问题，此代码将起作用

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

但是，如果你想获得所有结果，你可以使用这个。

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

干杯

html2canvas中的溢出问题

1 个答案: