Just My Life & My Work

[Flutter] pdf package

最近需要將報告輸出成 PDF 檔,Flutter 可以怎麼做呢?很簡單地使用 pdf package

PDF 檔是用於交換訊息最知名的檔案格式,因為內容不能輕易地被更改,如此能夠保護我們的內容。

我們先來看 Demo 的畫面~

藍色按鈕為建立 PDF 檔且儲存到 App 中,然後刷新畫面,顯示 PDF 檔內容。

在此需要使用三個 Package:

在 pubspec.yaml 檔中加入:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  path_provider: ^2.0.9
  pdf: ^3.7.1
  syncfusion_flutter_pdfviewer: ^19.4.52-beta
.

然後導入想使用的檔案中:

import  'package:pdf/pdf.dart' ; 
import  'package:path_provider/path_provider.dart' ; 
import  'package:syncfusion_flutter_pdfviewer/pdfviewer.dart' ;
.

接著就實作 PdfScreen 的程式碼:

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Happy Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PdfScreen(),
    );
  }
}

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

  @override
  _PdfScreenState createState() => _PdfScreenState();
}

class _PdfScreenState extends State<PdfScreen> {

  String pdfFile = '';
  pw.Document pdf = pw.Document();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.lightGreen,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Visibility(
            visible: pdfFile.isNotEmpty,
            child: SizedBox(
              width: 300,
              height: 400,
              child: SfPdfViewer.file(File(pdfFile), canShowScrollHead: false, canShowScrollStatus: false,),
            ) ,
          ),
          ElevatedButton(
            onPressed: () {
              createPdfFile();
              savePdfFile();
            },
            child: Text('Create a PDF file'),
          )
        ],
      ),
    );
  }

  void 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.start,
              mainAxisSize: pw.MainAxisSize.min,
              children: [
                pw.Text('Create a happy PDF',
                textAlign: pw.TextAlign.center,
                style: pw.TextStyle(fontSize: 28)),
                pw.Divider(),
                pw.Divider(),
              ]
            )
          ];
        }
      )
    );
  }
  void savePdfFile() async {
    Directory documentDirectory = await getApplicationDocumentsDirectory();
    String documentPath = documentDirectory.path;
    String id = DateTime.now().millisecondsSinceEpoch.toString();
    File file = File('$documentPath/$id.pdf');
    file.writeAsBytesSync(await pdf.save());

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

iOS 儲存該 PDF 檔的位址如:

/var/mobile/Containers/Data/Application/FF7A27D9-D55A-46D5-9657-144AAB09353A/Documents/1645078108800.pdf

我們已經學會最基本的使用,進階用法可以加入圖片,讓內容更長可以捲動。🤠

參考:

Flutter 創建多圖像的PDF 文件

Comments on: "[Flutter] pdf package" (1)

  1. […] 接續上一篇 pdf package 教學文章,已經加入文字,現在我想繼續加入圖片,可以怎麼做呢?🤔 […]

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: