Flutter：如何将屏幕导出为 PDF答案

【问题标题】：Flutter: How to export a screen as a PDFFlutter：如何将屏幕导出为 PDF
【发布时间】：2023-02-08 03:48:07
【问题描述】：

我正在尝试导出以下屏幕：

在 Flutter 中作为 PDF 或 Doc。

因此，用户将能够在TextFields 中输入一些数据，完成后他们可以将整个页面下载为文档或 PDF 文档。

我是新来的，所以任何建议都会很好。

感谢你们

【问题讨论】：

标签： flutter dart pdf

【解决方案1】：

欢迎来到 Flutter ?

在 Flutter 中有大量的包可以处理 PDF，无论是像您这样创建它们，还是预览它们。

您可以检查来自fluttergemes.dev 的这个gallery 包，以使用 Flutter 访问大量PDF 包。

您还可以找到大量的 videos in YouTube 来解释如何使用 Flutter 创建 PDF。

【讨论】：

你好 Moaz，谢谢你的回复，但我需要用用户数据创建 pdf 格式的屏幕，所以这将取决于用户在文本字段上写的内容。我已经检查了很多视频的链接，但是只有创建一个没有数据输入的 pdf，谢谢
随时欢迎您，实际上您可以在PDF 中放入任何您想要的东西，只是玩弄它，您可以做一些事情，比如存储字段的值并将它们显示为普通文本。另请检查此链接，它可能对您有所帮助：help.syncfusion.com/flutter/pdf/working-with-forms

【解决方案2】：

您正在寻找的是this，它是一个用于使用 Widgets 创建 PDF 的库。

【讨论】：

【解决方案3】：

对于想要截取屏幕截图然后导出的人，在此示例中从小部件截取屏幕截图，但在包文档中，您可以阅读如何从整个屏幕截取屏幕截图，这很容易。

使用的包： https://pub.dev/packages/pdf https://pub.dev/packages/screenshot

import 'dart:io';
import 'dart:math';

import 'package:date_format/date_format.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:screenshot/screenshot.dart';

class HomeScreen extends StatefulWidget {
  static const String routeName = '/home';

  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final ScreenshotController _screenshotController = ScreenshotController();
  
  @override
  Widget build(BuildContext context) {
    return return SafeArea(
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        controller: _scrollController,
        child: RepaintBoundary(
          key: _globalKey,
          child: Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 15.0,
              vertical: 0.0,
            ),
            child: Center(
              child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.blueAccent,
                      padding: const EdgeInsets.all(0),
                    ),
                    onPressed: () {
                      _takeScreenshot(context, state);
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Icon(
                          Icons.picture_as_pdf,
                          size: 15,
                        ),
                      ],
                    ),
                  ),
            ),
          ),
        ),
      ),
    );
  }

  // the widget that need to be the one we want to take screenshot
  _someWidget() {
    return Text('Hope it will help you');
  }

  String _getRandomString(int length) {
    const chars =
        'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
    Random rnd = Random();
    return String.fromCharCodes(Iterable.generate(
        length, (_) => chars.codeUnitAt(rnd.nextInt(chars.length))));
  }
  
  // Take a screenshot
  _takeScreenshot(BuildContext context, OrderState state) {
    Widget container = _someWidget();
    _screenshotController
        .captureFromWidget(
            InheritedTheme.captureAll(context, Material(child: container)),
            delay: const Duration(seconds: 1))
        .then((capturedImage) {
      _exportScreenshotToPdf(context, capturedImage);
    });
  }

  // Export the screenshot as pdf
  Future<dynamic> _exportScreenshotToPdf(
      BuildContext context, Uint8List screenShot) async {
    pw.Document pdf = pw.Document();
    pdf.addPage(
      pw.Page(
        pageFormat: PdfPageFormat.a4,
        build: (context) {
          return pw.Expanded(
            child: pw.Image(pw.MemoryImage(screenShot), fit: pw.BoxFit.contain),
          );
        },
      ),
    );
    Directory documentDirectory = await getApplicationDocumentsDirectory();
    String documentPath = documentDirectory.path;

    File pdfFile = File(
        '$documentPath/${'${_getRandomString(10)}-${formatDate(DateTime.now(), [
          dd,
          '-',
          mm,
          '-',
          yyyy
        ])}'}.pdf');
    pdfFile.writeAsBytesSync(await pdf.save());
  }

【讨论】：