How to Create PDF Documents in Flutter WebAssembly?

The Syncfusion^® Flutter PDF library is used to create, read, and edit PDF documents programmatically without Adobe dependencies. With this library, you can generate PDFs in Flutter WebAssembly (WASM).

Steps to create a Flutter WebAssembly(WASM) application and create PDF programmatically

1. Create a new Flutter application project.

• Open Visual Studio Code (after installing the Dart and Flutter extensions as described in the setup guide).
• Click View -> Command Palette
  
  
• Type Flutter and choose Flutter: New Project.
  
  
• Enter the project name and press Enter.
• Now, choose the location of the project.

2. Add the following code to 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 command or the Get packages option from Visual Studio Code.

dependencies:
     syncfusion_flutter_pdf: ^28.2.12

3. Import the following package in your main.dart file.

import 'package:syncfusion_flutter_pdf/pdf.dart';

4. 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,
         )
       ],
     ),
   ),
 );
}

5. Add the following code to the _createPDF function to programmatically create a PDF document.

Future<void> _createPDF() async{
   //Create a PDF document.
   var document = PdfDocument();

   //Add page and draw text to the page.
   document.pages.add().graphics.drawString(
       'Hello World!', PdfStandardFont(PdfFontFamily.helvetica, 18),
       brush: PdfSolidBrush(PdfColor(0, 0, 0)),
       bounds: Rect.fromLTWH(0, 0, 500, 30));
       
   //Save the document
   List<int> bytes = await document.save();

   // Dispose the document
   document.dispose();

   //Save the file and launch/download
   SaveFile.saveAndLaunchFile(bytes, 'output.pdf');
 }

WASM:
a. Create a new dart file named save_file_wasm.dart under the lib folder and import the following packages in save_file_wasm.dart file.

import 'dart:convert';
import 'package:web/web.dart' as web;

b. Include the following code example in the save_file_wasm.dart file to open the PDF document in WASM platforms.

// Function to save and launch a file for download in a web environment
Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
 final web.HTMLAnchorElement anchor =
     web.document.createElement('a') as web.HTMLAnchorElement
       ..href = "data:application/octet-stream;base64,${base64Encode(bytes)}"
       ..style.display = 'none'
       ..download = fileName;

// Insert the new element into the DOM
web.document.body!.appendChild(anchor);

// Initiate the download
anchor.click();
// Clean up the DOM by removing the anchor element
web.document.body!.removeChild(anchor);
}

6. Run the sample using the following flutter run command to start your WASM application.

flutter run -d chrome --wasm 

7. This creates a simple PDF document. After the application launches, you will get the PDF document as follows.
   
   

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.

Conclusion

I hope you enjoyed learning about how to create a PDF file in Syncfusion^® Flutter PDF Library.

You can refer to our Flutter PDF feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Flutter PDF example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion^®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!