blazor-devexpress-dot-blazor-dot-dxrangeselector-dot-exporttoasync-x28-system-dot-string-devexpress-dot-blazor-dot-dataexportformat-x29.md
Exports component data to a file in the specified format.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public ValueTask ExportToAsync(
string fileName,
DataExportFormat format = DataExportFormat.Png
)
| Name | Type | Description |
|---|---|---|
| fileName | String |
Exported file name.
|
| Name | Type | Default | Description |
|---|---|---|---|
| format | DataExportFormat | Png |
Exported file format.
|
| Type | Description |
|---|---|
| ValueTask |
A structure that stores an awaitable result of an asynchronous operation.
|
Call the ExportToAsync() method to export component data to a file in PNG, PDF, JPEG, or SVG format. When you call the ExportToAsync method, the Range Selector raises the Exported event.
The following code snippet displays a custom Export to PDF button that exports the Range Selector to a PDF file. The button appears after the component is loaded. For demo purposes, the example imitates a time-consuming operation.
<DxRangeSelector Width="1000px"
Height="400px"
@ref="RangeSelector"
Data="@Data"
Rendered="@RangeSelectorRendered"
ValueChangeMode="RangeSelectorValueChangeMode.OnHandleMove">
<DxTitleSettings Text="Population by Country">
<DxSubtitleSettings Text="2023" />
</DxTitleSettings>
<DxRangeSelectorChart>
<DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
ValueField="@((PopulationPoint s) => s.Value)" />
</DxRangeSelectorChart>
</DxRangeSelector>
<DxButton Text="Export to PDF" Visible="@buttonVisible" Click="@ExportToPdf" />
@code {
bool buttonVisible;
DxRangeSelector RangeSelector;
async Task ExportToPdf() {
await RangeSelector.ExportToAsync("Range Selector", DataExportFormat.Pdf);
}
async Task RangeSelectorRendered() {
await Task.Delay(2000);
buttonVisible = true;
}
List<PopulationPoint> Data;
protected override void OnInitialized() {
Data = GetData();
}
}
public List<PopulationPoint> GetData() {
var result = new List<PopulationPoint>(14);
result.Add(new PopulationPoint("India", 1428627663));
result.Add(new PopulationPoint("China", 1425671352));
result.Add(new PopulationPoint("United States", 339996563));
result.Add(new PopulationPoint("Indonesia", 277534122));
result.Add(new PopulationPoint("Pakistan", 240485658));
result.Add(new PopulationPoint("Nigeria", 223804632));
result.Add(new PopulationPoint("Brazil", 216422446));
result.Add(new PopulationPoint("Bangladesh", 172954319));
result.Add(new PopulationPoint("Russia", 144444359));
result.Add(new PopulationPoint("Mexico", 128455567));
result.Add(new PopulationPoint("Ethiopia", 126527060));
result.Add(new PopulationPoint("Japan", 123294513));
result.Add(new PopulationPoint("Philippines", 117337368));
result.Add(new PopulationPoint("Egypt", 112716598));
return result;
}
public class PopulationPoint {
public string Country { get; set; }
public long Value { get; set; }
public PopulationPoint(string country, long value) {
Country = country;
Value = value;
}
}
See Also