Render to PDF using package:pdf/widgets.dart #1424

hadjiprocopis · 2025-03-04T20:18:30Z

hadjiprocopis
Mar 4, 2025

My problem is that I need to display HTML in a widget and also print it (to PDF). Here is my case in detail: https://stackoverflow.com/questions/79484742/render-widget-content-to-pdf-or-render-html-to-widget-and-pdf-consistently

HtmlWidget works well (thank you!) with my simple HTML (which contains lists and paragraphs and colored text as <span> with different css classes). The css classes are handled well with customStylesBuilder: (element) { ...}.

However, HTMLToPdf() from package htmltopdfwidgets renders the same HTML to PDF but it looks different than HtmlWidget contents. Additionally, I have not found a way to handle css classes like I do with HtmlWidget.

The first thing in mind when pressing the print icon on a GUI is that what you see inside the widget is what it will come out in the printer. Consistent rendering. But I fail to see that with my flutter app. (Apropos, that was very easy with rendering div contents to PDF in HTML).

The pdf flutter package takes a list of widgets which then it renders to PDF. And HTMLToPdf() (from package htmltopdfwidgets) returns a list of such widgets. These widgets are AFAICS a mirror of the common flutter widgets under their own namespace (in below code, that's pw).

My question is, can HtmlWidget made to return a list of pdf widgets instead? Then its content can be rendered to PDF.

Where do I start?

import 'package:flutter/material.dart';

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:printing/printing.dart';
import 'package:htmltopdfwidgets/htmltopdfwidgets.dart' as HTMLtoPDFWidgets;

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Center(
            child: IconButton(
                icon: Icon(Icons.print),
                onPressed: () async {
                  await Printing.layoutPdf(
                      onLayout: (PdfPageFormat format) async {
                    String body =
                        "<html><body><div><span>a,\nb,c</span></body></html>";
                    final pdf = pw.Document();
                    final widgets =
                        await HTMLtoPDFWidgets.HTMLToPdf().convert(body,
                          wrapInParagraph: true
                        );
                    pdf.addPage(pw.MultiPage(build: (context) => widgets));
                    return await pdf.save();
                  });
                })));
  }
}

daohoangson · 2025-03-05T06:14:48Z

daohoangson
Mar 5, 2025
Maintainer

Can you build a HtmlWidget inside MultiPage or something?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Render to PDF using package:pdf/widgets.dart #1424

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Render to PDF using package:pdf/widgets.dart #1424

Uh oh!

Uh oh!

hadjiprocopis Mar 4, 2025

Replies: 2 comments

Uh oh!

daohoangson Mar 5, 2025 Maintainer

hadjiprocopis
Mar 4, 2025

daohoangson
Mar 5, 2025
Maintainer