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
+48-49Lines changed: 48 additions & 49 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ 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.
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 exported PDF document.
14
14
15
15
When you click the Export button, your browser will receive the resulting file.
16
16
@@ -25,36 +25,42 @@ When you click the Export button, your browser will receive the resulting file.
25
25
26
26
## Basics
27
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).
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
29
30
30
````RAZOR.skip-repl
31
31
<GridToolBarTemplate>
32
32
<GridCommandButton Command="PdfExport" Icon="@SvgIcon.FilePdf">Export to Pdf</GridCommandButton>
33
33
</GridToolBarTemplate>
34
34
````
35
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:
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 customization of the exported columns/data or configure the PDF export options:
@@ -79,14 +84,13 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp
79
84
protected override void OnInitialized()
80
85
{
81
86
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();
87
+
{
88
+
ProductId = x,
89
+
ProductName = $"Product {x}",
90
+
UnitsInStock = x * 2,
91
+
Price = 3.14159m * x,
92
+
Discontinued = x % 4 == 0,
93
+
}).ToList();
90
94
}
91
95
92
96
public class SampleData
@@ -96,7 +100,6 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp
96
100
public int UnitsInStock { get; set; }
97
101
public decimal Price { get; set; }
98
102
public bool Discontinued { get; set; }
99
-
public DateTime FirstReleaseDate { get; set; }
100
103
}
101
104
}
102
105
````
@@ -109,8 +112,8 @@ You can programmatically invoke the export feature of the Grid, by using the fol
109
112
110
113
| Method | Type | Description |
111
114
| --- | --- | --- |
112
-
|`SaveAsPdfFileAsync`|`ValueTask`| sends the exported Pdf file to the browser for download. |
113
115
|`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. |
116
+
|`SaveAsPdfFileAsync`|`ValueTask`| sends the exported PDF file to the browser for download. |
114
117
115
118
>caption Invoke the export function from code
116
119
@@ -119,20 +122,21 @@ You can programmatically invoke the export feature of the Grid, by using the fol
119
122
120
123
@using System.IO
121
124
122
-
<TelerikButton OnClick="@(async () => await GridRef.SaveAsPdfFileAsync())">Download the Pdf file</TelerikButton>
125
+
<TelerikButton OnClick="@(async () => await GridRef.SaveAsPdfFileAsync())">Download the PDF file</TelerikButton>
123
126
<TelerikButton OnClick="@GetTheDataAsAStream">Get the Exported Data as a MemoryStream</TelerikButton>
124
127
125
128
<TelerikGrid @ref="@GridRef"
126
129
Data="@GridData"
130
+
FilterMode="@GridFilterMode.FilterMenu"
127
131
Pageable="true"
128
132
Sortable="true"
129
-
Resizable="true"
130
133
Reorderable="true"
131
-
FilterMode="@GridFilterMode.FilterRow"
132
-
Groupable="true">
134
+
Resizable="true"
135
+
Groupable="true"
136
+
Width="650px">
133
137
134
138
<GridToolBarTemplate>
135
-
<GridCommandButton Command="PdfExport" Icon="@SvgIcon.FilePdf">Export to Pdf</GridCommandButton>
139
+
<GridCommandButton Command="PdfExport" Icon="@SvgIcon.FilePdf">Export to PDF</GridCommandButton>
136
140
<label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
137
141
</GridToolBarTemplate>
138
142
@@ -142,11 +146,10 @@ You can programmatically invoke the export feature of the Grid, by using the fol
@@ -162,8 +165,9 @@ You can programmatically invoke the export feature of the Grid, by using the fol
162
165
exportedPdfStream = new MemoryStream(finalizedStream.ToArray());
163
166
}
164
167
165
-
List<SampleData> GridData { get; set; }
166
-
bool ExportAllPages { get; set; }
168
+
private List<SampleData> GridData { get; set; }
169
+
170
+
private bool ExportAllPages { get; set; }
167
171
168
172
protected override void OnInitialized()
169
173
{
@@ -174,7 +178,6 @@ You can programmatically invoke the export feature of the Grid, by using the fol
174
178
UnitsInStock = x * 2,
175
179
Price = 3.14159m * x,
176
180
Discontinued = x % 4 == 0,
177
-
FirstReleaseDate = DateTime.Now.AddDays(-x)
178
181
}).ToList();
179
182
}
180
183
@@ -185,7 +188,6 @@ You can programmatically invoke the export feature of the Grid, by using the fol
185
188
public int UnitsInStock { get; set; }
186
189
public decimal Price { get; set; }
187
190
public bool Discontinued { get; set; }
188
-
public DateTime FirstReleaseDate { get; set; }
189
191
}
190
192
}
191
193
````
@@ -196,38 +198,35 @@ To customize the exported file, handle the `OnBeforeExport` or `OnAfterExport` e
196
198
197
199
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.
198
200
199
-
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).
201
+
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).
200
202
201
203
Read more about how to [customize the exported file](slug:grid-export-events).
202
204
203
205
## Notes
204
206
205
-
The Pdf export has the following specifics:
207
+
The PDF export has the following specifics:
206
208
207
209
* When exporting grid columns, the developer must provide column widths that are appropriate for exporting the data. While an Excel file allows resizing its columns, the PDF file format does not allow resizing the columns. The width of the column can be changed from the `OnBeforeExportEventArgs.Columns[0].Width property`, so developers have full control over this value (note that it can be different from the one defined in the corresponding grid column, thus ensuring flexibility to render the grid columns with one widths and export them in others).
208
210
* We do not recommend exporting columns without widths - while Excel has a default width for a column, PDF requires fixed dimensions. We recommend setting specific widths to all columns when exporting (note that this is unrelated to the width of the column of the grid as the export width can be configured in `OnBeforeExportEventArgs.Columns[0].Width` property.
209
-
*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.
211
+
*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.
210
212
* When exporting grid columns, the developer must provide appropriate `PaperSize` and `PageOrientation` properties. For example, if you want to render 20 columns (100px each) in a A4 sheet, then this will yield unexpected results. The column dimensions in a PDF file are fixed, thus they cannot be resized as in Excel, which requires the developer to ensure proper export dimensions.
211
213
* Exporting to PDF in UI for Blazor is different from exporting in Kendo jQuery, where the full HTML is exported. The Blazor export to PDF will export the Grid to a table, similar to an Excel table. If you want [to export to PDF as HTML, you can use a custom approach](#custom-export).
212
-
* 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).
214
+
* 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.
221
+
If you want to have full control over the PDF export, you can perform it with a custom approach.
220
222
221
223
The following sample projects show two ways to implement a PDF export
222
224
223
-
* <ahref="https://github.com/telerik/blazor-ui/tree/master/grid/pdf-export-server"target="_blank">Export Grid to PDF on the Server</a> - gets the `DataSourceRequest` from the grid and sends it to the server service for processing. It is used to let you fetch the same data that the grid has (including paging, filtering, sorting) so you can generate the PDF. For WebAssembly apps, this improves the performance by not generating the file in the browser, which is, at the time of writing, too slow for a real-life scenario.
224
-
225
-
* <ahref="https://github.com/telerik/blazor-ui/tree/master/common/pdf-jpg-export-js"target="_blank">PDF and JPG Export in the Browser with JS</a> - uses Kendo JS libraries to generate the PDF file from the current DOM in the browser.
226
-
225
+
* <ahref="https://github.com/telerik/blazor-ui/tree/master/grid/pdf-export-server"target="_blank">Export Grid to PDF on the Server</a> - This export is achieved through the [Telerik Document Processing tools](slug:dpl-in-blazor) that come with your Blazor license. The example shows how to get the `DataSourceRequest` from the Grid and send it to the server service for processing. Thus, you can fetch the same data that the Grid has (including paging, filtering, sorting) so you can generate the PDF. For WebAssembly apps, this improves the performance by not generating the file in the browser, which is, at the time of writing, too slow for a real-life scenario.
227
226
228
-
You can also follow the feature request for <ahref="https://feedback.telerik.com/blazor/1434269-export-grid-to-pdf"target="_blank">built-in Grid export to PDF</a>.
227
+
*<ahref="https://github.com/telerik/blazor-ui/tree/master/common/pdf-jpg-export-js"target="_blank">PDF and JPG Export in the Browser with JS</a> - This sample uses Kendo JS libraries to generate the PDF file from the current DOM in the browser.
229
228
230
229
## See Also
231
230
232
231
*[Blazor Grid](slug:grid-overview)
233
-
*[Live Demo: Grid Pdf Export](https://demos.telerik.com/blazor-ui/grid/export-Pdf)
232
+
*[Live Demo: Grid PDF Export](https://demos.telerik.com/blazor-ui/grid/export-Pdf)
0 commit comments