PDF File generation with Flutter web

Question

I'm in the process of Web'ifing a Flutter mobile application and attempting to get around the lack for support for Path Provider in Web.

I'm using the PDF (pdf: ^1.9.0) package to generate a PDF document and upload it to Google Drive and I'm trying to find out if I can generate and store the PDF In memory to make it web compatible.

Example current code using Path Provider.

createFile() async {
  final downloads = await getApplicationSupportDirectory();
  final file = File("${downloads.path}/$filename.pdf");
  await file.writeAsBytes(pdf.save());
  await GoogleDriveController.uploadFileToGoogleDrive(file.path);
}

Question: Is there a way to generate and store Fies in memory for web using Flutter web?

@pskink Thanks for the confirmation, looks like I will have to offload this to GCP Function. — Yonkee
– Yonkee, Commented Aug 19, 2020 at 6:05

Yonkee · Accepted Answer · 2020-08-19 19:08:01Z

I managed to find a work around to generate the PDF and trigger a download via the browser instead and thought I should post incase anyone stumbles across this.

//Create PDF in Bytes 
Uint8List pdfInBytes = pdf.save();
    
//Create blob and link from bytes
final blob = html.Blob([pdfInBytes], 'application/pdf');
final url = html.Url.createObjectUrlFromBlob(blob);
final anchor = html.document.createElement('a') as html.AnchorElement
     ..href = url
     ..style.display = 'none'
     ..download = 'pdf.pdf';
html.document.body.children.add(anchor);
    
//Trigger the download of this PDF in the browser.
    
RaisedButton(
   child: Text('Press'),
       onPressed: () {
         anchor.click();
         Navigator.pop(context);
       },
   )

I'm using this approach and works perfectly on Chrome while debugging, and on Safari on my Macbook. But it does nothing at all if I visit the web app on my iPhone. Any idea why this might be happening?

Dharman · Accepted Answer · 2021-02-11 14:35:20Z

My answer is a variant on Yonkee above specifically for flutter web. In this answer, I have added the imports required (dart:html and dart:typed_data) and added formatting of text as I needed that feature.

import 'package:flutter/material.dart';
import 'package:pdf/widgets.dart' as pw;
import 'dart:typed_data';
import 'dart:html' as html;

class PDFSave extends StatefulWidget {

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

class _PDFSaveState extends State<PDFSave> {

  final pdf = pw.Document();
  var anchor;

  savePDF() async {
    Uint8List pdfInBytes = await pdf.save();
    final blob = html.Blob([pdfInBytes], 'application/pdf');
    final url = html.Url.createObjectUrlFromBlob(blob);
    anchor = html.document.createElement('a') as html.AnchorElement
      ..href = url
      ..style.display = 'none'
      ..download = 'pdf.pdf';
    html.document.body.children.add(anchor);
  }


  createPDF() async {

  pdf.addPage(
    pw.Page(
      build: (pw.Context context) => pw.Column(
        children: [
          pw.Text('Hello World', style: pw.TextStyle(fontSize: 40)),
        ],
      ),
    ),
  );
  savePDF();
}

@override
  void initState() {
    super.initState();
    createPDF();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(backgroundColor: Colors.transparent,
        appBar: AppBar(
      title: Text('PDF Creator'),
    ),
    body: Center(
      child:RaisedButton(
        child: Text('Press'),
        onPressed: () {
          anchor.click();
          Navigator.pop(context);
        },
      )
    ));
  }
}

Collectives™ on Stack Overflow

PDF File generation with Flutter web

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related