Flutter数据网格导出插件syncfusion_flutter_datagrid_export的使用
Flutter数据网格导出插件syncfusion_flutter_datagrid_export的使用
简介
Syncfusion® 的 Flutter DataGrid export library 用于将 Flutter DataGrid 导出为 Excel 和 PDF 格式。它支持导出 DataGrid 内容，如标题、行、堆叠标题行和表格摘要行，并提供多种自定义选项。
**免责声明：**这是一个商业包。要使用此包，您需要拥有 Syncfusion® 商业许可证或免费的 Syncfusion® 社区许可证。有关更多详细信息，请参阅 LICENSE 文件。
目录
获取示例应用
探索我们 Flutter 小部件的全部功能，通过以下应用商店在您的设备上安装我们的示例浏览器应用程序，并在 GitHub 上查看示例代码。
其他有用链接
了解更多关于 Syncfusion® Flutter DataGrid 的信息：
安装
从 pub 安装最新版本。
import 'package:syncfusion_flutter_datagrid_export/export.dart';
开始使用
添加 DataGrid 到应用程序
按照 这里 提供的步骤将 DataGrid 添加到您的应用程序中。为了实现导出功能，可以在 Row 小部件中添加两个按钮，然后将 DataGrid 放在 Expanded 小部件中，并将按钮和 DataGrid 包裹在 Column 小部件中。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Syncfusion Flutter DataGrid Export',
overflow: TextOverflow.ellipsis,
),
),
body: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.all(12.0),
child: Row(
children: <Widget>[
SizedBox(
height: 40.0,
width: 150.0,
child: MaterialButton(
color: Colors.blue,
child: const Center(
child: Text(
'Export to Excel',
style: TextStyle(color: Colors.white),
)),
onPressed: exportDataGridToExcel),
),
const Padding(padding: EdgeInsets.all(20)),
SizedBox(
height: 40.0,
width: 150.0,
child: MaterialButton(
color: Colors.blue,
child: const Center(
child: Text(
'Export to PDF',
style: TextStyle(color: Colors.white),
)),
onPressed: exportDataGridToPdf),
),
],
),
),
Expanded(
child: SfDataGrid(
source: employeeDataSource,
columns: <GridColumn>[
GridColumn(
columnName: 'ID',
label: Container(
padding: const EdgeInsets.all(16.0),
alignment: Alignment.center,
child: const Text(
'ID',
))),
GridColumn(
columnName: 'Name',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Name'))),
GridColumn(
columnName: 'Designation',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text(
'Designation',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'Salary',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Salary'))),
],
),
),
],
),
);
}
为 DataGrid 添加 GlobalKey
创建一个带有 SfDataGridState 类的 GlobalKey，并将其设置给 DataGrid。导出相关的方法可以通过 SfDataGridState 类获得。
final GlobalKey<SfDataGridState> _key = GlobalKey<SfDataGridState>();
...
child: SfDataGrid(
key: _key,
...
),
将 DataGrid 导出到 Excel
使用 _key.currentState! 的 exportToExcelWorkbook 方法，并在按钮点击时调用此方法。
Future<void> exportDataGridToExcel() async {
final Workbook workbook = _key.currentState!.exportToExcelWorkbook();
final List<int> bytes = workbook.saveAsStream();
File('DataGrid.xlsx').writeAsBytes(bytes);
workbook.dispose();
}
将 DataGrid 导出到 PDF
使用 _key.currentState! 的 exportToPdfDocument 方法，并在按钮点击时调用此方法。
Future<void> exportDataGridToPdf() async {
final PdfDocument document =
_key.currentState!.exportToPdfDocument();
final List<int> bytes = document.save();
File('DataGrid.pdf').writeAsBytes(bytes);
document.dispose();
}
支持与反馈
如果您有任何问题，可以联系 Syncfusion® 支持团队 或在 社区论坛 发帖。您也可以通过我们的 反馈门户 提交功能请求或错误报告。
要续订订阅，请点击 续订 或联系我们的销售团队 sales@syncfusion.com | 免费电话：1-888-9 DOTNET。
关于 Syncfusion®
Syncfusion® 成立于 2001 年，总部位于北卡罗来纳州研究三角园区。我们有超过 22,000 名客户和 1 百万用户，包括大型金融机构、财富 500 强公司和全球 IT 咨询公司。
今天，我们提供了 1,600 多个控件和框架，适用于 Web、移动和桌面开发。我们还提供现成的企业软件，用于仪表板、报表、数据集成和大数据处理。许多客户通过部署我们的软件节省了数百万的许可费用。
示例代码
以下是完整的示例代码，展示了如何使用 syncfusion_flutter_datagrid_export 插件将 DataGrid 导出为 Excel 和 PDF 格式。
// ignore_for_file: depend_on_referenced_packages
import 'package:flutter/material.dart';
// External package imports
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
import 'package:syncfusion_flutter_datagrid_export/export.dart';
import 'package:syncfusion_flutter_pdf/pdf.dart';
import 'package:syncfusion_flutter_xlsio/xlsio.dart' hide Column, Row;
// Local import
import 'helper/save_file_mobile.dart'
if (dart.library.html) 'helper/save_file_web.dart'
if (dart.library.js_interop) 'helper/save_file_wasm.dart' as helper;
void main() {
runApp(const MyApp());
}
/// The application that contains datagrid on it.
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Syncfusion DataGrid Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const MyHomePage(),
);
}
}
/// The home page of the application which hosts the datagrid.
class MyHomePage extends StatefulWidget {
/// Creates the home page.
const MyHomePage({Key? key}) : super(key: key);
@override
MyHomePageState createState() => MyHomePageState();
}
/// A state class of a [MyHomePage] stateful widget.
class MyHomePageState extends State<MyHomePage> {
List<Employee> _employees = <Employee>[];
late EmployeeDataSource _employeeDataSource;
final GlobalKey<SfDataGridState> _key = GlobalKey<SfDataGridState>();
@override
void initState() {
super.initState();
_employees = _getEmployeeData();
_employeeDataSource = EmployeeDataSource(employeeData: _employees);
}
Future<void> _exportDataGridToExcel() async {
final Workbook workbook = _key.currentState!.exportToExcelWorkbook();
final List<int> bytes = workbook.saveAsStream();
workbook.dispose();
await helper.saveAndLaunchFile(bytes, 'DataGrid.xlsx');
}
Future<void> _exportDataGridToPdf() async {
final PdfDocument document =
_key.currentState!.exportToPdfDocument(fitAllColumnsInOnePage: true);
final List<int> bytes = document.saveSync();
await helper.saveAndLaunchFile(bytes, 'DataGrid.pdf');
document.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Syncfusion Flutter DataGrid Export',
overflow: TextOverflow.ellipsis,
),
),
body: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.all(12.0),
child: Row(
children: <Widget>[
SizedBox(
height: 40.0,
width: 150.0,
child: MaterialButton(
color: Colors.blue,
onPressed: _exportDataGridToExcel,
child: const Center(
child: Text(
'Export to Excel',
style: TextStyle(color: Colors.white),
))),
),
const Padding(padding: EdgeInsets.all(20)),
SizedBox(
height: 40.0,
width: 150.0,
child: MaterialButton(
color: Colors.blue,
onPressed: _exportDataGridToPdf,
child: const Center(
child: Text(
'Export to PDF',
style: TextStyle(color: Colors.white),
))),
),
],
),
),
Expanded(
child: SfDataGrid(
key: _key,
source: _employeeDataSource,
columns: <GridColumn>[
GridColumn(
columnName: 'ID',
label: Container(
padding: const EdgeInsets.all(16.0),
alignment: Alignment.center,
child: const Text(
'ID',
))),
GridColumn(
columnName: 'Name',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Name'))),
GridColumn(
columnName: 'Designation',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text(
'Designation',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'Salary',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Salary'))),
],
),
),
],
),
);
}
List<Employee> _getEmployeeData() {
return <Employee>[
Employee(10001, 'James', 'Project Lead', 20000),
Employee(10002, 'Kathryn', 'Manager', 30000),
Employee(10003, 'Lara', 'Developer', 15000),
Employee(10004, 'Michael', 'Designer', 15000),
Employee(10005, 'Martin', 'Developer', 15000),
Employee(10006, 'Newberry', 'Developer', 15000),
Employee(10007, 'Balnc', 'Developer', 15000),
Employee(10008, 'Perry', 'Developer', 15000),
Employee(10009, 'Gable', 'Developer', 15000),
Employee(10010, 'Grimes', 'Developer', 15000)
];
}
}
/// Custom business object class which contains properties to hold the detailed
/// information about the employee which will be rendered in datagrid.
class Employee {
/// Creates the employee class with required details.
Employee(this.id, this.name, this.designation, this.salary);
/// Id of an employee.
final int id;
/// Name of an employee.
final String name;
/// Designation of an employee.
final String designation;
/// Salary of an employee.
final int salary;
}
/// An object to set the employee collection data source to the datagrid. This
/// is used to map the employee data to the datagrid widget.
class EmployeeDataSource extends DataGridSource {
/// Creates the employee data source class with required details.
EmployeeDataSource({required List<Employee> employeeData}) {
_employeeData = employeeData
.map<DataGridRow>((Employee e) => DataGridRow(cells: <DataGridCell>[
DataGridCell<int>(columnName: 'ID', value: e.id),
DataGridCell<String>(columnName: 'Name', value: e.name),
DataGridCell<String>(
columnName: 'Designation', value: e.designation),
DataGridCell<int>(columnName: 'Salary', value: e.salary),
]))
.toList();
}
List<DataGridRow> _employeeData = <DataGridRow>[];
@override
List<DataGridRow> get rows => _employeeData;
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((DataGridCell cell) {
return Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Text(cell.value.toString()),
);
}).toList());
}
}
希望以上内容对您有所帮助！如果有任何问题或需要进一步的帮助，请随时联系我们。
更多关于Flutter数据网格导出插件syncfusion_flutter_datagrid_export的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter数据网格导出插件syncfusion_flutter_datagrid_export的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter应用中使用syncfusion_flutter_datagrid_export插件来导出DataGrid数据的示例代码。这个插件允许你将DataGrid中的数据导出为Excel、CSV或PDF格式。
首先，确保你已经在pubspec.yaml文件中添加了依赖项：
dependencies:
flutter:
sdk: flutter
syncfusion_flutter_datagrid: ^x.y.z # 请替换为最新版本号
syncfusion_flutter_datagrid_export: ^x.y.z # 请替换为最新版本号
syncfusion_flutter_pdf: ^x.y.z # 如果需要导出为PDF格式
syncfusion_flutter_excel: ^x.y.z # 如果需要导出为Excel格式
然后，运行flutter pub get来安装这些依赖。
以下是一个完整的示例代码，展示如何使用syncfusion_flutter_datagrid_export插件来导出DataGrid数据：
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
import 'package:syncfusion_flutter_datagrid_export/datagrid_export.dart';
import 'package:syncfusion_flutter_pdf/pdf.dart';
import 'package:syncfusion_flutter_excel/excel.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DataGrid Export Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _dataGridController = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DataGrid Export Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Expanded(
child: SfDataGrid(
controller: _dataGridController,
source: DataGridSource.fromJson(
data: [
{'Name': 'John', 'Age': 30, 'Country': 'USA'},
{'Name': 'Anna', 'Age': 22, 'Country': 'Canada'},
{'Name': 'Peter', 'Age': 25, 'Country': 'Germany'},
],
),
columns: [
DataGridTextColumn(
columnName: 'Name',
label: Container(
child: Text('Name'),
),
),
DataGridNumericColumn(
columnName: 'Age',
label: Container(
child: Text('Age'),
),
),
DataGridTextColumn(
columnName: 'Country',
label: Container(
child: Text('Country'),
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
onPressed: () => _exportToCsv(),
child: Text('Export to CSV'),
),
ElevatedButton(
onPressed: () => _exportToExcel(),
child: Text('Export to Excel'),
),
// 如果需要导出为PDF，请确保添加syncfusion_flutter_pdf依赖并实现相应逻辑
// ElevatedButton(
// onPressed: () => _exportToPdf(),
// child: Text('Export to PDF'),
// ),
],
),
],
),
),
);
}
void _exportToCsv() {
final DataGridExport export = DataGridExport();
final String csvData = export.exportToCsv(_dataGridController.dataSource);
final Directory appDocDir = Directory(appDocDirPath());
final File csvFile = File('${appDocDir.path}/datagrid_data.csv');
csvFile.writeAsStringSync(csvData);
print('CSV file saved to ${csvFile.path}');
// 可选：打开文件或显示提示信息
}
void _exportToExcel() async {
final DataGridExport export = DataGridExport();
final List<ExcelRange> excelData = export.exportToExcel(_dataGridController.dataSource);
final ExcelDocument document = ExcelDocument();
document.sheets.add().ranges = excelData;
final Directory appDocDir = Directory(appDocDirPath());
final File excelFile = File('${appDocDir.path}/datagrid_data.xlsx');
await document.saveAs(excelFile.path);
print('Excel file saved to ${excelFile.path}');
// 可选：打开文件或显示提示信息
}
// 如果需要导出为PDF，请实现以下函数，并确保添加syncfusion_flutter_pdf依赖
// void _exportToPdf() {
// // 实现导出为PDF的逻辑
// }
}
// 获取应用文档目录路径的函数（适用于Android和iOS）
String appDocDirPath() {
if (kIsWeb) {
return ''; // Web平台处理逻辑（如果需要）
} else if (Platform.isAndroid) {
return '/storage/emulated/0/Android/data/${yourPackageName()}/files/';
} else if (Platform.isIOS) {
return (Platform.localDirectory.path + '/Documents/');
} else {
return '';
}
}
// 获取应用包名的函数（仅适用于Android）
String yourPackageName() {
// 返回你的应用的包名，例如 'com.example.yourapp'
return 'com.example.yourapp';
}
注意：
- 代码中的
appDocDirPath()和yourPackageName()函数是为了获取应用的文档目录路径，这在Android和iOS上是必要的。你需要根据你的应用包名替换yourPackageName()函数的返回值。 - 对于Web平台，文件保存逻辑需要特殊处理，这里为了简洁起见没有包含。
- PDF导出功能需要额外的
syncfusion_flutter_pdf依赖，并且需要实现相应的导出逻辑。上面的代码中有注释掉的相关部分，你可以根据需要自行实现。
这个示例展示了如何将DataGrid中的数据导出为CSV和Excel格式。你可以根据实际需求进行进一步的定制和扩展。
