Studio reports can be exported for viewing outside of the browser.
Print Layout Copy Link
Printing physical copies or exporting to PDF are achieved using the browser's print dialogue. Only the content will be exported, and the remaining UI will be hidden.
For best results, configure the page's layout to match your target paper size and margins. The layout is measured in pixels, and a conversion factor of 96 pixels per inch is used.
The example below targets landscape A4 (297 × 210mm, or 1123 × 794px). Setting minWidth and maxWidth to the same value fixes the page width, height fixes the page height, and pagePadding insets the content by 1 inch.
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgStudio } from "ag-studio-angular";
import {
AgDataEngine,
AgDataSourcesDefinition,
AgReportState,
AgStudioApi,
AgStudioApiReadyEvent,
AgStudioMode,
AgStudioProperties,
enableStudioDevValidations,
} from "ag-studio";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
@Component({
selector: "my-app",
standalone: true,
imports: [AgStudio],
template: `<div style="display: flex; flex-direction: column; height: 100%">
<div class="example-controls">
<div class="controls-row">
<button (click)="printPage()">Print</button>
</div>
</div>
<ag-studio
style="width: 100%; height: 100%;"
class="my-studio-container"
[initialState]="initialState"
[mode]="mode"
[data]="data"
(apiReady)="onApiReady($event)"
/>
</div> `,
})
export class AppComponent {
initialState: AgReportState = {
pages: [
{
id: "a",
widgets: {
"1": {
type: "grid",
dataMapping: {
cols: [
{
id: "medals.country",
},
{
id: "medals.gold",
aggregation: "sum",
},
{
id: "medals.silver",
aggregation: "sum",
},
{
id: "medals.bronze",
aggregation: "sum",
},
],
},
},
"2": {
type: "line-chart",
dataMapping: {
categoryKey: [
{
id: "medals.age",
},
],
valueKey: [
{
id: "medals.total",
aggregation: "sum",
},
],
tooltipKey: [],
},
format: {
title: {
enabled: true,
text: "Medals vs. Age",
},
},
},
"3": {
type: "value",
dataMapping: {
value: [
{
id: "medals.gold",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Gold",
},
},
},
"4": {
type: "value",
dataMapping: {
value: [
{
id: "medals.silver",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Silver",
},
},
},
"5": {
type: "value",
dataMapping: {
value: [
{
id: "medals.bronze",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Bronze",
},
},
},
"6": {
type: "value",
dataMapping: {
value: [
{
id: "medals.total",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Total",
},
},
},
},
widgetLayout: {
"1": {
xTrack: 0,
yTrack: 0,
xSpan: 10,
ySpan: 37,
},
"2": {
xTrack: 10,
yTrack: 0,
xSpan: 14,
ySpan: 20,
},
"3": {
xTrack: 10,
yTrack: 20,
xSpan: 7,
ySpan: 9,
},
"4": {
xTrack: 10,
yTrack: 29,
xSpan: 7,
ySpan: 8,
},
"5": {
xTrack: 17,
yTrack: 20,
xSpan: 7,
ySpan: 9,
},
"6": {
xTrack: 17,
yTrack: 29,
xSpan: 7,
ySpan: 8,
},
},
layout: {
minWidth: 1123,
maxWidth: 1123,
height: 794,
pagePadding: 96,
widgetBorderEnabled: true,
},
},
],
selectedPageId: "a",
panels: {
filters: {
collapsed: true,
},
edit: {
collapsed: true,
},
data: {
collapsed: true,
},
},
};
mode: AgStudioMode = "edit";
constructor(private http: HttpClient) {}
printPage() {
print();
}
onApiReady(params: AgStudioApiReadyEvent) {
this.http
.get("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
.subscribe((data) => (this.data = { sources: [{ id: "medals", data }] }));
}
}
@page {
size: A4 landscape;
margin: 96px;
}
@media print {
.example-controls {
display: none;
}
}
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component.ts';
const app = bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
});
const pageState = {
layout: {
minWidth: 1123,
maxWidth: 1123,
height: 794,
pagePadding: 96,
},
}To preconfigure the browser's print dialogue, copy the page size and margins into a @page rule in your CSS:
@page {
size: A4 landscape;
margin: 96px;
}The canvas' background is not exported for print. To export a background, set a background-color on the :root element. You should set the Colour Mode to an appropriate value for the background chosen.