Displaying a created PDF in a new tab for flutter web

Question

I am currently creating a PDF to display inputted data from the user and I want to display the pdf in a new tab so they can either print it or download it or just close out.

The current PDF creation method is:

Future<void> createPDF() async{
    final PdfDocument document = PdfDocument(); 

     document.pages.add().graphics.drawString(
        'Hello World!', PdfStandardFont(PdfFontFamily.helvetica, 20),
        brush: PdfSolidBrush(PdfColor(0, 0, 0)),
        bounds: Rect.fromLTWH(20, 60, 150, 30));

    List<int> bytes = await document.save();
    
    document.dispose();

    saveAndLaunchFile(bytes, '$NewConfig.pdf');
  }

then to open the file I have this method:

Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {

Uint8List test = Uint8List.fromList(bytes);

final pdfController = PdfController(document:PdfDocument.openData(test));

PdfView(controller: pdfController);
}

The issue I am running into is the new tab that opens displays this:

37806870454946551310371311462502541310493248321119810613106060131047841211121013247679711697108111103131047809710310111532503248328213106262131010111010011198106131050324832111981061310606013104784121112101324780971031011151310477510510011532915132483282931310476711111711011632491310478210111511111711499101115326060626213101310477710110010597661111203291483248325357533256525093131062621310101110100111981061310513248321119810613106060131047671111171101163249131047841211121013247809710310111513104775105100115329152324832829313104780971141011101163250324832821310626213101011101001119810613105232483211198106131060601310478412111210132478097103101131047809711410111011632513248328213104767111110116101110116115329153324832823254324832823255324832829313104782101115111117114991011153260601310478011411199831011163291478068703247841011201169313104770111110116326060131047994998565353545345534851514552101565345985399504553565154485748981015048513256324832821310626213101310626213101310626213101011101001119810613105332483211198106131060601310477010510811610111432477010897116101681019911110010113104776101110103116104325713106262131011511611410197109131012094434001140114131010111010011511611410197109131010111010011198106131054324832111981061310606013104770105108116101114324770108971161016810199111100101131047761011101031161043257131062621310115116114101971091310120941140082082131010111010011511611410197109131010111010011198106131055324832111981061310606013104770105108116101114324770108971161016810199111100101131047761011101031161043250505713106262131011511611410197109131012094101143657534916133239129252135241322146718217921720554949169175213642071871051869320038539138254122147698014597301321532472302034337215176592471105216061243225561856225136314915325146710778105157252165162164620485841822824418812023711612918515227228989410517881108111961551426748148156415712843203422444621814625525521417525223914411496171408922315518373155231199452369425460117164423832424364215131201621976962111762147219361615719178233240147195177114221341688311317017616894244613148201231158207322789229127168204178122502141225624896143871835514860100184613795972178011310101110100115116114101971091310101110100111981061310563248321119810613106060131047841211121013247701111101161310478311798116121112101324784121112101491310476697115101701111101163247721011081181011161059997131047691109911110010511010332478710511065110115105691109911110010511010313106262131010111010011198106131012011410110213104832571310484848484848484848483254535351533210213104848484848484848495532484848484832110131048484848484848485550324848484848321101310484848484848484956483248484848483211013104848484848484850535732484848484832110131048484848484848525256324848484848321101310484848484848485351543248484848483211013104848484848484854505232484848484832110131048484848484848575152324848484848321101310116114971051081011141310606013104782111111116324932483282131047831051221013257131062621310131011511697114116120114101102131049485157131037376979701310

which I am guessing is the bytes but am at a loss as to what I am supposed to do from here.

any info?

Answer 1

I suggest you to directly use a pub package like native_pdf_view. Its easyer than your method in my opinion and you dont need to reinvente the wheel.

EDIT: Here is a code that i do quickly, it can be improve with a ChangeNotifier etc... to handle Future function, But it work.

main.dart

    import 'dart:typed_data';

    import 'package:flutter/material.dart';
    import 'package:native_pdf_view/native_pdf_view.dart';
    import 'package:syncfusion_flutter_pdf/pdf.dart' as scPdf;


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

    class MyApp extends StatelessWidget {
      const MyApp({super.key});

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      const MyHomePage({super.key, required this.title});

      final String title;

      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
      late PdfController _pdfController;
      bool isPdfLoaded = false;

      Future<void> createPDF() async{
        final scPdf.PdfDocument document = scPdf.PdfDocument();
        document.pages.add().graphics.drawString(
            'Hello World!', scPdf.PdfStandardFont(scPdf.PdfFontFamily.helvetica, 20),
            brush: scPdf.PdfSolidBrush(scPdf.PdfColor(0, 0, 0)),
            bounds: Rect.fromLTWH(20, 60, 150, 30));
        List<int> bytes = await document.save();
        document.dispose();
        saveAndLaunchFile(bytes, 'test.pdf');
      }

      Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
        Uint8List test = Uint8List.fromList(bytes);
        final pdfController = PdfController(document:PdfDocument.openData(test));
        setState(() {
          isPdfLoaded = true;
          _pdfController = pdfController;
        });
      }

      @override
      Widget build(BuildContext context) {
        var size = MediaQuery.of(context).size;
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'PDF',
                ),
                isPdfLoaded ? Container(width : size.width, height: size.height * 0.5, child : PdfView(controller: _pdfController)) : Text("Pdf not loaded"),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: createPDF,
            tooltip: 'CreatePDF',
            child: const Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
    }

Re-EDIT: This is the exemple using Navigator.push to display the pdf in another page:

main.dart

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:native_pdf_view/native_pdf_view.dart';
import 'package:stackoverflow/pdf_view.dart';
import 'package:syncfusion_flutter_pdf/pdf.dart' as scPdf;


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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late PdfController _pdfController;
  bool isPdfLoaded = false;

  Future<void> createPDF() async{
    final scPdf.PdfDocument document = scPdf.PdfDocument();
    document.pages.add().graphics.drawString(
        'Hello World!', scPdf.PdfStandardFont(scPdf.PdfFontFamily.helvetica, 20),
        brush: scPdf.PdfSolidBrush(scPdf.PdfColor(0, 0, 0)),
        bounds: Rect.fromLTWH(20, 60, 150, 30));
    List<int> bytes = await document.save();
    document.dispose();
    saveAndLaunchFile(bytes, 'test.pdf');
  }

  Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
    Uint8List test = Uint8List.fromList(bytes);
    final pdfController = PdfController(document:PdfDocument.openData(test));
    await Navigator.of(context).push((MaterialPageRoute(builder: (context) => PdfViewPage(pdfController: pdfController))));
  }

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Click on Floating button to create and open your pdf in another view',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: createPDF,
        tooltip: 'CreatePDF',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

pdf_view.dart

import 'package:flutter/material.dart';
import 'package:native_pdf_view/native_pdf_view.dart';

class PdfViewPage extends StatelessWidget {
  const PdfViewPage({Key? key, required this.pdfController}) : super(key: key);
  final PdfController pdfController;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PdfView(controller: pdfController)
      ),
    );
  }
}