You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/grid/export/pdf.md
+199Lines changed: 199 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,6 +10,204 @@ position: 1
10
10
11
11
# PDF Export
12
12
13
+
You can export the grid to Pdf with a click of a button. The current filter, sort, page, grouping, column order and column size are applied to the `xlsx` document.
14
+
15
+
When you click the Export button, your browser will receive the resulting file.
16
+
17
+
18
+
#### In This Article
19
+
20
+
-[Basics](#basics)
21
+
-[Programmatic Export](#programmatic-export)
22
+
-[Customization](#customization)
23
+
-[Notes](#notes)
24
+
-[Custom Export](#custom-export)
25
+
26
+
## Basics
27
+
28
+
To enable the Grid Pdf Export, add a [command button]({%slug components/grid/columns/command%}) with the `PdfExport` command name to the [Grid toolbar]({%slug components/grid/features/toolbar%}).
29
+
30
+
````RAZOR.skip-repl
31
+
<GridToolBarTemplate>
32
+
<GridCommandButton Command="PdfExport" Icon="@SvgIcon.FilePdf">Export to Pdf</GridCommandButton>
33
+
</GridToolBarTemplate>
34
+
````
35
+
36
+
Optionally, you can also set the `GridPdfExport` tag settings under the `GridExport` tag to subscribe to [Grid export events]({%slug grid-export-events%}) that allow further customizations of the exported columns/data or configure the Pdf export options:
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
82
+
{
83
+
ProductId = x,
84
+
ProductName = $"Product {x}",
85
+
UnitsInStock = x * 2,
86
+
Price = 3.14159m * x,
87
+
Discontinued = x % 4 == 0,
88
+
FirstReleaseDate = DateTime.Now.AddDays(-x)
89
+
}).ToList();
90
+
}
91
+
92
+
public class SampleData
93
+
{
94
+
public int ProductId { get; set; }
95
+
public string ProductName { get; set; }
96
+
public int UnitsInStock { get; set; }
97
+
public decimal Price { get; set; }
98
+
public bool Discontinued { get; set; }
99
+
public DateTime FirstReleaseDate { get; set; }
100
+
}
101
+
}
102
+
````
103
+
104
+
## Programmatic Export
105
+
106
+
You can programmatically invoke the export feature of the Grid, by using the following methods exposed on the `@ref` of the Grid:
107
+
108
+
*`SaveAsPdfFileAsync` - `ValueTask` - sends the exported Pdf file to the browser for download.
109
+
*`ExportToPdfAsync` - `Task<MemoryStream>` - returns the exported data as a `MemoryStream`. The stream itself is finalized, so that the resource does not leak. To read and work with the stream, clone its available binary data to a new `MemoryStream` instance.
110
+
111
+
>caption Invoke the export function from code
112
+
113
+
````RAZOR
114
+
@* Send the exported file for download and get the exported data as a memory stream *@
115
+
116
+
@using System.IO
117
+
118
+
<TelerikButton OnClick="@(async () => await GridRef.SaveAsPdfFileAsync())">Download the Pdf file</TelerikButton>
119
+
<TelerikButton OnClick="@GetTheDataAsAStream">Get the Exported Data as a MemoryStream</TelerikButton>
120
+
121
+
<TelerikGrid @ref="@GridRef"
122
+
Data="@GridData"
123
+
Pageable="true"
124
+
Sortable="true"
125
+
Resizable="true"
126
+
Reorderable="true"
127
+
FilterMode="@GridFilterMode.FilterRow"
128
+
Groupable="true">
129
+
130
+
<GridToolBarTemplate>
131
+
<GridCommandButton Command="PdfExport" Icon="@SvgIcon.FilePdf">Export to Pdf</GridCommandButton>
132
+
<label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
exportedPdfStream = new MemoryStream(finalizedStream.ToArray());
159
+
}
160
+
161
+
List<SampleData> GridData { get; set; }
162
+
bool ExportAllPages { get; set; }
163
+
164
+
protected override void OnInitialized()
165
+
{
166
+
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
167
+
{
168
+
ProductId = x,
169
+
ProductName = $"Product {x}",
170
+
UnitsInStock = x * 2,
171
+
Price = 3.14159m * x,
172
+
Discontinued = x % 4 == 0,
173
+
FirstReleaseDate = DateTime.Now.AddDays(-x)
174
+
}).ToList();
175
+
}
176
+
177
+
public class SampleData
178
+
{
179
+
public int ProductId { get; set; }
180
+
public string ProductName { get; set; }
181
+
public int UnitsInStock { get; set; }
182
+
public decimal Price { get; set; }
183
+
public bool Discontinued { get; set; }
184
+
public DateTime FirstReleaseDate { get; set; }
185
+
}
186
+
}
187
+
````
188
+
189
+
## Customization
190
+
191
+
To customize the exported file, handle the `OnBeforeExport` or `OnAfterExport` events the Grid exposes.
192
+
193
+
The component allows you to control the data set that will be exported. It also provides built-in customization options for the columns such as `Width`, `Title` and more.
194
+
195
+
For more advanced customization (such as coloring the headers or bolding the titles) the Grid lets you get the `MemoryStream` of the file. Thus, you can customize it using the [`SpreadProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview) or the [`SpreadStreamProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview) libraries that are available with your license. Find examples on how to [format the cells of the exported Pdf file with RadSpreadProcessing]({%slug grid-kb-custom-cell-formatting-with-radspreadprocessing%}) and how to [format the cells of the exported Pdf file with RadSpreadStreamProcessing]({%slug grid-kb-custom-cell-formatting-with-radspreadstreamprocessing%}).
196
+
197
+
Read more about how to [customize the exported file]({%slug grid-export-events%}).
198
+
199
+
## Notes
200
+
201
+
The Pdf export has the following specifics:
202
+
203
+
* Pdf does not understand units different than `px` for the column `Width`, and if you use them (such as `rem` or `%`), it will fail to parse them and will render a collapsed (hidden) column with zero width.
204
+
* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own Pdf file. Find a <ahref="https://feedback.telerik.com/blazor/1485764-customize-the-Pdf-file-before-it-gets-to-the-client"target="_blank">project example on how to generate your own exported file</a>. Find additional information on how to [export an image that is rendered in a Grid column template]({%slug grid-export-image-column-Pdf%}).
The [Telerik Document Processing tools]({%slug dpl-in-blazor%}) that come with your Blazor license let you generate a PDF file based on the data in the grid.
14
212
15
213
The following sample projects show two ways to implement a PDF export
@@ -24,3 +222,4 @@ You can also follow the feature request for <a href="https://feedback.telerik.co
24
222
## See Also
25
223
26
224
*[Blazor Grid]({%slug grid-overview%})
225
+
*[Live Demo: Grid Pdf Export](https://demos.telerik.com/blazor-ui/grid/export-Pdf)
0 commit comments