demo D129
PNG capture
Export the grid, or a range, as an image
grid.capture()
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
selection: 'multiple',
toolPanel: {
side: 'left',
panels: ['columns', 'filters'],
exportName: 'lattice-demo',
actions: ['restore', 'maximise'],
},
columns: [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 150 } },
{ field: 'team', title: 'Team', filter: { type: 'set' } },
{ field: 'owner', title: 'Owner', filter: { type: 'set' } },
{ field: 'tier', title: 'Tier', cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
{ field: 'state', title: 'State', cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'monthlyCost', title: 'Monthly cost', type: 'number',
format: { style: 'currency', currency: 'USD', decimals: 0 }, total: 'sum', layout: { width: 160 } },
],
rows, // wide service rows
});
// capture() photographs the browser's own rendering and returns a Blob. It
// needs no full screen, so call it whenever you like.
const blob = await grid.capture({ scale: 2 });
const bitmap = await createImageBitmap(blob);
console.log(blob.type, bitmap.width + ' x ' + bitmap.height, blob.size + ' bytes');
// A file name is what triggers the save. `download: true` alone does not:
// the capture returns the blob and writes nothing without one.
await grid.capture({ scale: 3, fileName: 'lattice-grid.png' });
// The image is made in your browser and never uploaded.
</script>Exporting a grid or a cell range as a PNG image
PNG capture renders the current grid, or a selected range, to a bitmap image that can be downloaded, pasted into a document, or attached to a message without opening a spreadsheet. Reach for this in any JavaScript data grid embedded in a workflow tool, dashboard or report builder, where a user wants to hand off a snapshot of what they are looking at: a support agent capturing a range to illustrate a discrepancy, or a manager pulling a picture of this week’s figures for a summary email. Lattice Grid exposes the feature through grid.capture(), which draws the visible viewport, or a supplied cell range, to canvas and returns image data, so a host application controls what happens to the file afterwards, whether that is a browser download, a clipboard write or an upload.
Capture reads from the same cell layer the grid already renders, including colour scales, conditional formatting and frozen columns, so the image matches what the user sees on screen rather than a plain re-export of raw values. Because a data grid can hold far more rows than fit in the viewport, capture is scoped to what is currently rendered or to an explicit range, so producing an image never means rasterising an entire virtualised dataset that was never fully in the DOM.
How do you export a grid to an image in JavaScript?
Call grid.capture() to render the visible grid, or a specified cell range, to a PNG. Lattice Grid draws from the live cell layer, so formatting such as colour scales and frozen columns is preserved in the output, and the result can be downloaded, copied or attached without exporting the underlying data as a spreadsheet file.