Flutter表格导出插件pluto_grid_export的使用

PlutoGridExport for PlutoGrid - v1.0.6

此插件可以将PlutoGrid的元数据导出为CSV或PDF。

安装

请参考官方分发站点的安装说明：

• Pub.Dev

贡献者

• Enrique Cardona

示例

以下是一个完整的示例，展示了如何使用pluto_grid_export插件将PlutoGrid的数据导出为CSV和PDF文件。

import 'dart:convert';

import 'package:file_saver/file_saver.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pluto_grid/pluto_grid.dart';
import 'package:pluto_grid_export/pluto_grid_export.dart' as pluto_grid_export;

void main() {
  runApp(const MyApp());
}

/// 有关更多详细信息，请参阅以下链接以了解如何使用它。
/// https://github.com/bosskmk/pluto_grid/blob/master/demo/lib/screen/feature/export_screen.dart
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late PlutoGridStateManager stateManager;

  final List<PlutoColumn> columns = [
    PlutoColumn(
      title: 'Column1',
      field: 'column_1',
      type: PlutoColumnType.text(),
    ),
    PlutoColumn(
      title: 'Column2',
      field: 'column_2',
      type: PlutoColumnType.text(),
    ),
    PlutoColumn(
      title: 'Column3',
      field: 'column_3',
      type: PlutoColumnType.text(),
    ),
  ];

  final List<PlutoRow> rows = [
    PlutoRow(
      cells: {
        'column_1': PlutoCell(value: 'cell 1-1'),
        'column_2': PlutoCell(value: 'cell 1-2'),
        'column_3': PlutoCell(value: 'cell 1-3'),
      },
    ),
    PlutoRow(
      cells: {
        'column_1': PlutoCell(value: 'cell 2-1'),
        'column_2': PlutoCell(value: 'cell 2-2'),
        'column_3': PlutoCell(value: 'cell 2-3'),
      },
    ),
    PlutoRow(
      cells: {
        'column_1': PlutoCell(value: 'cell 3-1'),
        'column_2': PlutoCell(value: 'cell 3-2'),
        'column_3': PlutoCell(value: 'cell 3-3'),
      },
    ),
  ];

  void exportToPdf() async {
    final themeData = pluto_grid_export.ThemeData.withFont(
      base: pluto_grid_export.Font.ttf(
        await rootBundle.load('fonts/open_sans/OpenSans-Regular.ttf'),
      ),
      bold: pluto_grid_export.Font.ttf(
        await rootBundle.load('fonts/open_sans/OpenSans-Bold.ttf'),
      ),
    );

    var plutoGridPdfExport = pluto_grid_export.PlutoGridDefaultPdfExport(
      title: "Pluto Grid Sample pdf print",
      creator: "Pluto Grid Rocks!",
      format: pluto_grid_export.PdfPageFormat.a4.landscape,
      themeData: themeData,
    );

    await pluto_grid_export.Printing.sharePdf(
      bytes: await plutoGridPdfExport.export(stateManager),
      filename: plutoGridPdfExport.getFilename(),
    );
  }

  void exportToCsv() async {
    String title = "pluto_grid_export";

    var exported = const Utf8Encoder()
        .convert(pluto_grid_export.PlutoGridExport.exportCSV(stateManager));

    // 使用file_saver从pub.dev
    await FileSaver.instance.saveFile("$title.csv", exported, ".csv");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            SizedBox(
              height: 50,
              child: Row(
                children: [
                  TextButton(
                    onPressed: exportToPdf,
                    child: const Text('Export to PDF'),
                  ),
                  TextButton(
                    onPressed: exportToCsv,
                    child: const Text('Export to CSV'),
                  ),
                ],
              ),
            ),
            Expanded(
              child: PlutoGrid(
                columns: columns,
                rows: rows,
                onLoaded: (e) {
                  stateManager = e.stateManager;
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

说明

1. 导入必要的包：

   • file_saver：用于保存文件。
   • flutter：Flutter框架。
   • pluto_grid：PlutoGrid库。
   • pluto_grid_export：PlutoGrid导出插件。

2. 定义列和行：

   • columns：定义表格的列。
   • rows：定义表格的行。

3. 导出功能：

   • exportToPdf：将表格数据导出为PDF文件。
   • exportToCsv：将表格数据导出为CSV文件。

4. UI布局：

   • TextButton：提供导出按钮。
   • PlutoGrid：显示表格数据。

通过以上步骤，您可以轻松地将PlutoGrid中的数据导出为CSV或PDF文件。希望这个示例对您有所帮助！