How to create a PDF file in Flutter web platform?
The Syncfusion® Flutter PDF is a non-UI PDF library written natively in Dart for creating the PDF documents from scratch. Using this package, you can create a PDF document in the Flutter Mobile and Web platforms.
Steps to create a PDF document programmatically in Web platform
- Create a new Flutter application project.
1.1Open Visual Studio Code (After installing the Dart and Flutter extensions as stated in this setup editor page)
1.2Click View -> Command Palette…
1.3Type Flutter and choose Flutter: New Project.
1.4Enter the project name and press the Enter button.
1.5Now choose the location of the project.
- Add the following code in your pubspec.yaml file to install the syncfusion® flutter pdf package in your application. It will be automatically downloaded from the pub once you trigger the flutter pub get a comment or Get packages option from the Visual Studio Code.
dependencies: syncfusion_flutter_pdf: ^20.3.49
Import the following package in your main.dart file.
import 'package:syncfusion_flutter_pdf/pdf.dart';
- Add the following code in the lib/main.dart file to create a simple button.
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ TextButton( child: Text( 'Generate PDF', style: TextStyle(color: Colors.white), ), style: ButtonStyle( backgroundColor: MaterialStateProperty.resolveWith( (states) => Colors.blue)), onPressed: _createPDF, ) ], ), ), ); }
- Add the following code to the _createPDF function to create a PDF document programmatically.
Future<void> _createPDF() async { //Create a PDF document. PdfDocument document = PdfDocument(); //Add a page and draw text document.pages.add().graphics.drawString( 'Hello World!', PdfStandardFont(PdfFontFamily.helvetica, 20), brush: PdfSolidBrush(PdfColor(0, 0, 0)), bounds: Rect.fromLTWH(20, 60, 150, 30)); //Save the document List<int> bytes = await document.save(); //Dispose the document document.dispose(); }
- Use the following code to download the generated PDF file in web platform.
5.1Import the following packages in your main.dart file.
import 'dart:convert'; import 'dart:html';
5.2Include the following code snippet in the _createPDF method to download the PDF document in the web application (any browser).
//Download the output file AnchorElement( href: "data:application/octet-stream;charset=utf-16le;base64,${base64.encode(bytes)}") ..setAttribute("download", "output.pdf") ..click();
- To run the sample in web platform, follow the steps given in Building a web application with Flutter. Using the flutter run -d chrome command, launch the application in chrome browser. This creates a simple PDF document.
After the application launches, you will get the application preview and PDF document as follows.
A complete working sample can be downloaded from CreatePdfFile.zip
Take a moment to peruse the documentation, where you can find other options like drawing right-to-left text, consuming TrueType fonts, Standards fonts, and CJK fonts. Also, the features like headers and footers, bookmarks, tables, hyperlink PDF documents, and more with code examples.