最近需要將報告輸出成 PDF 檔，Flutter 可以怎麼做呢？很簡單地使用 pdf package。
PDF 檔是用於交換訊息最知名的檔案格式，因為內容不能輕易地被更改，如此能夠保護我們的內容。
我們先來看 Demo 的畫面～
藍色按鈕為建立 PDF 檔且儲存到 App 中，然後刷新畫面，顯示 PDF 檔內容。
在此需要使用三個 Package：
- https://pub.dev/packages/pdf
- https://pub.dev/packages/path_provider
- https://pub.dev/packages/syncfusion_flutter_pdfviewer
在 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
我們已經學會最基本的使用，進階用法可以加入圖片，讓內容更長可以捲動。🤠
參考：
逍遙文工作室 
Comments on: "[Flutter] pdf package" (1)
[…] 接續上一篇 pdf package 教學文章，已經加入文字，現在我想繼續加入圖片，可以怎麼做呢？🤔 […]
讚讚