乐趣区

关于flutter:Flutter-创建多图像的-PDF-文件

jiezi

猫哥说

放弃激情去扭转!

明天这篇文章是让你在客户端实现 PDF 的创立，这样能加重服务器的压力。

这是很有必要的，服务器的 CPU 资源很贵重。

Flutter 插件 https://pub.dev/packages/pdf

  • 性能有：

    • 载入图片
    • 写上文字
    • 加密、签名文件
    • 也能够载入 pdf

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40…

原文

https://medium.com/flutterdev…

代码

https://github.com/flutter-de…

参考

  • https://pub.dev/packages/pdf
  • https://pub.dev/packages/path…
  • https://pub.dev/packages/sync…

注释

在 Flutter 不同的性能使您的应用程序丰盛的有用性，并给简略的客户端做货色内的应用程序和改善客户端的教训，是一个专家单干是另外必不可少的开发人员。

有很多软件包能够用来在应用程序中关上 pdf，有些比较复杂，有些并不难执行，在这里我将说明可能最容易应用的办法。

在这个博客中，咱们将摸索 Flutter ー创立多张图片的 PDF 文件。咱们将施行一个演示程序，以显示如何 Flutter 创立一个 pdf 文件与多个图像应用的三个因素包在您的 Flutter 应用程序。

状态治理

简介:

PDF 很可能是用于替换业务信息的最驰名的文档格局，因为内容不能像不同配置那样无效地更改。这样能够爱护咱们的信息不受未经批准的更改的影响。一旦你晓得了策略，这通常是一个简略的互动，我会通知你在你的工作中制作 pdf 文档的最好办法。

对于这个演示，须要三个根本的软件包。

  • https://pub.dev/packages/pdf
  • https://pub.dev/packages/path…
  • https://pub.dev/packages/sync…

演示模块:

这个演示视频显示了如何在一个 Flutter 与多个图像创立 pdf 文件。它显示了 pdf 文件将如何应用这三个软件包在您的 Flutter 应用程序。它显示当用户点击一个创立按钮，而后呈现 pdf，依据页面有多个图像。它会显示在你的设施上。

实施方案:

  • 第一步: 增加依赖项

将依赖项增加到 pubspec ー yaml 文件。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  path_provider: ^2.0.1
  pdf: ^3.3.0
  syncfusion_flutter_pdfviewer: ^19.1.64-beta
  • 第二步: 增加 assets

将 assets 增加到 pubspec ー yaml 文件。

assets:
  - assets/images/
  • 第三步: 导入 
import 'package:pdf/pdf.dart';
import 'package:path_provider/path_provider.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
  • 第四步: 在应用程序的根目录中运行 flutter 软件包

如何实现 dart 文件中的代码:

你须要别离在你的代码中实现它:

在 lib 文件夹中创立一个名为 pdf screen demo. dart 的新 dart 文件。

  • 首先，让咱们创立一个根本的 PDF 文件:

在文件中创立一个 StatefulWidget，名为 PdfScreenDemo。

String pdfFile = '';

一个根本的用户界面，咱们有一个凸起的按钮，使咱们的 PDF 文件和一个可见性小部件揭示 PDF 浏览器一旦 PDF 记录。要查看 PDF 记录，咱们将应用 syncfusion/flutter/pdfviewer 包的 SfPdfViewer.file 小部件，在这个小部件中，咱们将制作一个文档，其形式与咱们制作的 PDF 相似。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
      Visibility(
          visible: pdfFile.isNotEmpty,
          child: SfPdfViewer.file(File(pdfFile),
              canShowScrollHead: false, canShowScrollStatus:
           false),
        ),
    RaisedButton(
        color: Colors.tealAccent,
        onPressed: () {},
        child: Text('Create a Pdf File')),
  ],
),

PDF 包有它本人的小部件库存，为了调用这些库存，咱们须要导入 PDF 小部件作为一个变量名为 pw。

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

为了结构一个 PDF 格局，咱们将通过调用 pw < widgetnme > 来调用小部件。

为了保留一个 pdf 文件，咱们应该做一个。文件 ()。这个不常见的小部件将保留已生成 PDF 的数据，因而咱们在 \_ PdfScreenDemoState 中生成一个变量如何。

var pdf = pw.Document();

Lest’s create createPdfFile() method:

在这个模型中，咱们的想法是制作一个多页的带有 a4 设计的 PDF。因为咱们要增加的图片的数量，页面的数量可能是多个的，依照这些程序，当初制作一个多页面小部件是个好兆头。

在 MultiPage 小部件的构建办法外部，将有一个带有 Header 的 Column 和 Divider，用于将本质内容与 Header 拆散。在接下来的几个阶段中，咱们将在本栏内的分隔符下增加本质内容。

createPdfFile() {
  pdf.addPage(pw.MultiPage(margin: pw.EdgeInsets.all(10),
      pageFormat: PdfPageFormat.a4,
      build: (pw.Context context) {
        return <pw.Widget>[
          pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.center,
              mainAxisSize: pw.MainAxisSize.min,
              children: [
                pw.Text('Create a basic PDF',
                    textAlign: pw.TextAlign.center,
                    style: pw.TextStyle(fontSize: 26)),
                pw.Divider(),]),
        ];
      }));
}

尔后，咱们应该创立一个 savePdfFile () 办法。

它是一种异步办法，期待 IOS 或 Android 平台的目录。而后，该技术应用 ID 的名称和目录的 documentPath 创立一个记录。你能够用任何你喜爱的形式来命名你的记录，然而对于不同的 PDF 创立来说，更聪慧的做法是为每个 PDF 文档都起一个非凡的名字。

最初，该办法将 PDF 保留为文件。Path 和 value 被赋给 setState 策略中的 pdfFile 变量，以便稍后刷新 UI。

savePdfFile() async {Directory documentDirectory = await getApplicationDocumentsDirectory();

String documentPath = documentDirectory.path;

String id = DateTime.now().toString();

File file = File("$documentPath/$id.pdf");

file.writeAsBytesSync(await pdf.save());
setState(() {
pdfFile = file.path;
pdf = pw.Document();});
}

重要提醒: 任命民主党人是基本。在保留 pdf 文件之后，将 Document () 转换为 pdf 变量。如果不这样做，该 pdf 将尝试使另一个最近制作的 pdf 文件，这将导致一个有缺点的 pdf 文件被制作。

如果您须要保留您的 PDF 文件的字节，您能够利用下方的办法。

List<int> pdfBytes;
pdfBytes = await file.readAsBytes();
pdfFile base64Encode(pdfBytes);

除此之外，应用异步 onPressed 办法:

为了保留记录，咱们须要首先期待 createPdfFile () 策略。

onPressed: () async {await createPdfFile();
  savePdfFile();},

好了，当初所有都安顿好了。你能够点击“创立一个 PDF 文件”按钮来查看你的第一个根本 PDF 文档。当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

  • 让咱们用一个图片创立一个 pdf 文件:

在 pdf 包中，你能够增加一个图片。MemoryImage. 因而，咱们须要将图片更改为内存字节。

首先导入上面的软件包。

import 'dart:typed_data';
import 'package:flutter/services.dart';

从那时起，将 createdffile 转换为一个 async 办法，并增加这两个变量。

final ByteData bytes = await rootBundle.load('assets/images/null_safety.png');
final Uint8List byteList = bytes.buffer.asUint8List();

第一个变量在资源图片上更改为字节，第二个变量在字节上更改为 Uint8List 字节列表。

而后，在这一点上增加一个 pw 图像小部件在分隔符上面。

createPdfFile() async {
  final ByteData bytes =
      await rootBundle.load('assets/images/null_safety.png');
  final Uint8List byteList = bytes.buffer.asUint8List();
  pdf.addPage(pw.MultiPage(margin: pw.EdgeInsets.all(10),
      pageFormat: PdfPageFormat.a4,
      build: (pw.Context context) {
        return <pw.Widget>[
          pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.center,
              mainAxisSize: pw.MainAxisSize.min,
              children: [
                pw.Text('Flutter Pdf File with Image',
                    textAlign: pw.TextAlign.center,
                    style: pw.TextStyle(fontSize: 26)),

                pw.Divider(),]),
          pw.SizedBox(height: 70),
          pw.Image(
              pw.MemoryImage(byteList,),
              height: 300,
              fit: pw.BoxFit.fitHeight),
        ];
      }));
}

MemoryImage 承受 byteList 作为地位竞争，将图片传送到 pdf 记录中。当初重新启动应用程序，并尝试制作另一个 PDF 文档，以查看其中蕴含图片的文件。当咱们运行应用程序时，咱们应该取得屏幕输入，就像上面的屏幕截图一样。

  • 让咱们创立一个有多个图片的 pdf 文件:

在演示的最初一步，咱们将制作一个 pdf 构建技术，它能够用给定的各种图像生成一条记录。首先，咱们须要制订一个策略，将图片转换为 Uint8List 设计。

在状态小部件中，创立一个空白列表，用于将图片放入 Uint8list。

List<Uint8List> imagesUint8list = [];

而后，咱们应该重构 createdffile 办法，并集中于另一种获取图片字节的技术。

getImageBytes(String assetImage) async {final ByteData bytes = await rootBundle.load(assetImage);
    final Uint8List byteList = bytes.buffer.asUint8List();
    imagesUint8list.add(byteList);
  }

当初咱们将制作一个类型为 pw 的列表。createPdfFile () 技术中的小部件，它生成具备图像题目和图像自身的 Column。

final List<pw.Widget> pdfImages = imagesUint8list.map((image) {
      return pw.Padding(padding: pw.EdgeInsets.symmetric(vertical: 20, horizontal:    10),
          child: pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.center,
              mainAxisSize: pw.MainAxisSize.max,
              children: [
                pw.Text(
                    'Image'
                            ' ' +
                        (imagesUint8list
                                    .indexWhere((element) => element
                                   == image) +
                                1)
                            .toString(),
                    style: pw.TextStyle(fontSize: 22)),
                pw.SizedBox(height: 10),
                pw.Image(
                    pw.MemoryImage(image,),
                    height: 400,
                    fit: pw.BoxFit.fitHeight)
              ]));
    }).toList();

留神: 这是紧急给一个特定的最大大小的图片小部件，否则一个图片可能会溢出页面设计促使一个失败的 pdf 创立。

Createdffile 最后会创立一个 for 循环，将多个图片更改为 Uint8List。稍后，它将制作一个带有头部的图片列表。最初，pdfImages 将作为子文件显示在 pdf 的根本列中。

createPdfFile() async {for (String image in assetImages) await getImageBytes(image);
    final List<pw.Widget> images = imagesUint8list.map((image) {
      return pw.Padding(padding: pw.EdgeInsets.symmetric(vertical: 20, horizontal:  10),
          child: pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.center,
              mainAxisSize: pw.MainAxisSize.max,
              children: [
                pw.Text(
                    'Image'
                            ' ' +
                        (imagesUint8list
                                   .indexWhere((element) => element
                             == image) +
                                1)
                            .toString(),
                    style: pw.TextStyle(fontSize: 22)),
                pw.SizedBox(height: 10),
                pw.Image(
                    pw.MemoryImage(image,),
                    height: 400,
                    fit: pw.BoxFit.fitHeight)
              ]));
    }).toList();
    pdf.addPage(pw.MultiPage(margin: pw.EdgeInsets.all(10),
        pageFormat: PdfPageFormat.a4,
        build: (pw.Context context) {
          return <pw.Widget>[
            pw.Column(
                crossAxisAlignment: pw.CrossAxisAlignment.center,
                mainAxisSize: pw.MainAxisSize.min,
                children: [
                  pw.Text('Create a Simple PDF',
                      textAlign: pw.TextAlign.center,
                      style: pw.TextStyle(fontSize: 26)),
                  pw.Divider(),]),
            pw.Column(
                crossAxisAlignment: pw.CrossAxisAlignment.center,
                mainAxisSize: pw.MainAxisSize.max,
                children: pdfImages),
          ];
        }));
  }

另一个步骤是用 SingleChildScrollView 和 Expanded 小部件包装可见性小部件。

Expanded(
              child: SingleChildScrollView(
                child: Visibility(
                  visible: pdfFile.isNotEmpty,
                  child: SfPdfViewer.file(File(pdfFile),
                      canShowScrollHead: false, canShowScrollStatus: false),
                ),
              ),
            ),

当初如何咱们按下按钮最初一次机会，使 PDF 文件与多个图片。当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

代码:

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

class PdfScreenDemo extends StatefulWidget {
  @override
  _PdfScreenDemoState createState() => _PdfScreenDemoState();
}

class _PdfScreenDemoState extends State<PdfScreenDemo> {
  String pdfFile = '';
  var pdf = pw.Document();

  static const List<String> assetImages = [
    'assets/images/null_safety.png',
    'assets/images/stream.png',
    'assets/images/error_handling.jpg'
  ];
  List<Uint8List> imagesUint8list = [];

  @override
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: SingleChildScrollView(
                  child: Visibility(
                    visible: pdfFile.isNotEmpty,
                    child: SfPdfViewer.file(File(pdfFile),
                        canShowScrollHead: false, canShowScrollStatus: false),
                  ),
                ),
              ),
              RaisedButton(
                  color: Colors.tealAccent,
                  onPressed: () async {await createPdfFile();
                    savePdfFile();},
                  child: Text('Create a Pdf File')),
            ],
          ),
        ),
      ),
    );
  }

  getImageBytes(String assetImage) async {final ByteData bytes = await rootBundle.load(assetImage);
    final Uint8List byteList = bytes.buffer.asUint8List();
    imagesUint8list.add(byteList);
    print(imagesUint8list.length);
  }

  createPdfFile() async {for (String image in assetImages) await getImageBytes(image);
    final List<pw.Widget> pdfImages = imagesUint8list.map((image) {
      return pw.Padding(padding: pw.EdgeInsets.symmetric(vertical: 50, horizontal: 10),
          child: pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.center,
              mainAxisSize: pw.MainAxisSize.max,
              children: [
                pw.Text(
                    'Image'
                            ' ' +
                        (imagesUint8list
                                    .indexWhere((element) => element == image) +
                                1)
                            .toString(),
                    style: pw.TextStyle(fontSize: 22)),
                pw.SizedBox(height: 30),
                pw.Image(
                    pw.MemoryImage(image,),
                    height: 300,
                    fit: pw.BoxFit.fitHeight)
              ]));
    }).toList();

    pdf.addPage(pw.MultiPage(margin: pw.EdgeInsets.all(10),
        pageFormat: PdfPageFormat.a4,
        build: (pw.Context context) {
          return <pw.Widget>[
            pw.Column(
                crossAxisAlignment: pw.CrossAxisAlignment.center,
                mainAxisSize: pw.MainAxisSize.min,
                children: [
                  pw.Text('Flutter Pdf File with Multiple Image',
                      textAlign: pw.TextAlign.center,
                      style: pw.TextStyle(fontSize: 26)),
                  pw.Divider(),]),
            pw.Column(
                crossAxisAlignment: pw.CrossAxisAlignment.center,
                mainAxisSize: pw.MainAxisSize.max,
                children: pdfImages),
          ];
        }));
  }

  savePdfFile() async {Directory documentDirectory = await getApplicationDocumentsDirectory();

    String documentPath = documentDirectory.path;

    String id = DateTime.now().toString();

    File file = File("$documentPath/$id.pdf");

    file.writeAsBytesSync(await pdf.save());
    setState(() {
      pdfFile = file.path;
      pdf = pw.Document();});
  }
}

Conclusion

在这篇文章中，我解释了创立 PDF 文件的根本构造与多重图像 Flutter; 您能够批改这个代码依据您的抉择。这是一个小的介绍创立 PDF 文件与多图像用户交互从我这边，它的工作应用 Flutter。

我心愿这个博客将提供您在尝试创立 PDF 文件与多个图像在您的扑我的项目充沛的信息。咱们将向您展现介绍是什么？. 制作一个演示程序为工作创立 PDF 文件与多个图像和显示当用户点击一个创立按钮，而后 PDF 产生，与多个图像依据页面应用所有三个软件包在您的 Flutter 应用程序。所以请尝试一下。

© 猫哥

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

退出移动版