Performance Issues

[WorldpixelSoftware]

Hi there. Just to mention, the package is great, thanks for all the work!

Describe the bug Performance could be improved. When writing large documents with several pages, the UI gets blocked, because internally there is never the chance for the eventloop to work off other events.

To Reproduce call await pdf.save(); on a larger document and see the UI freeze.

Expected behavior UI should not freeze.

Flutter Doctor

pdf 3.8.2

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19044.1826], locale de-DE)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.17)
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.67.2)
[√] Connected device (3 available)
[√] HTTP Host Availability

Desktop (please complete the following information):

• [x ] iOS
• [ x] Android
• [ ] Browser
• [ x] Windows
• [ ] Linux

Additional context When doing heavy computations in a loop, consider either calling await Future.delayed(Duration.zero) to give the eventloop the chance to process other events aswell or letting a seperate isolate handle the task.

Looking into all the for loops of this package internally, that are looping over the document or the elements to process them, this would really help to improve performance. Although it would increase time slightly, the UI would not freeze anymore. Should be possible to fix within minimum amount of time.

[NigelFelim]

Hello, I encountered this problem too. Do you have any temporary solution for this ? Thank you

[DavBfr]

Use isolates.

[NigelFelim]

Okay, I will try that. Thank you sir

[luis-rodas]

Use isolates.

Isolates doesn't works on Web platform :(

[luis-rodas]

I don't know if is posible convert this in small tasks or streams, to able to UI continue with the main thread

[DavBfr]

Not really, what takes time is mostly image processing using the image package. If you use jpeg images instead of PNG it will be faster, because they are embedded into the PDFs as is. The PNGs are compressed to match the PDF format.

[luis-rodas]

Not really, what takes time is mostly image processing using the image package. If you use jpeg images instead of PNG it will be faster, because they are embedded into the PDFs as is. The PNGs are compressed to match the PDF format.

Ohh, thanks for the tip!

[NigelFelim]

Hi, so I want to generate multi page pdf consisting of only text and table on Web platform. So based on the discussion, I can't use Isolate because it doesn't work (I've tried it myself too). Does that mean there is currently no solution for this problem? Sorry I'm new to this

[DavBfr]

You can try https://pub.dev/packages/isolated_worker

[tuncayugur]

You can try https://pub.dev/packages/isolated_worker

I think the code to be run in isolated_worker examples needs to be written as javascript. Can you share sample code to guide us through this?

[NigelFelim]

You can try JsPDF and its plugin like autoTable in my example. I'm using Bloc State Management with isolated_worker here. This code below is the js code. Hope it helps.

`function exportPDF(/* params if needed */) { const { jsPDF } = jspdf;

var doc = new jsPDF();

var arrayForTable = [];

doc.setFontSize(18);
doc.setFont('times', 'bold');
doc.text('Title Here', 105, 32.5, 'center');

doc.setFontSize(10);
doc.setFont('times', 'normal');
doc.text('Subtitle Here', 52.5, 50.5, 'center');

for (var i = 0; i < 1000; i++) {
    arrayForTable.push([
        i + 1,
        25 August 2022,
        "Jhon Doe",
    ]);
}

doc.autoTable({
    head: [['ID', 'Date', 'Name']],
    body: arrayForTable,
    theme: 'plain',
    styles: {
        font: 'times',
        fillColor: 'white',
        textColor: 'black',
        lineColor: 'black',
        lineWidth: 0.2,
        valign: 'middle',
    },
    headStyles: {
        halign: 'center',
        fontStyle: 'bold',
        cellPadding: {
            left: 0,
            right: 0,
            top: 2,
            bottom: 2,
        }
    },
    startY: 52.5,
    margin: {
        top: 25,
        bottom: 30,
        left: 8,
        right: 8,
    },
    columnStyles: {
        0: {
            cellWidth: 10.5,
            halign: 'center',
        },
        1: {
            cellWidth: 15.5,
            halign: 'center',
            cellPadding: {
                left: 1,
                right: 1,
                top: 2,
                bottom: 2,
            },
        },
        2: {
            cellWidth: 52,
        },
    },
    rowPageBreak: 'avoid',
});

var pdf = doc.output('arraybuffer');

var uint8 = new Uint8Array(pdf);

return uint8; // Return Uint8 to Bloc}

[tuncayugur]

Thanks NigelFelim. But that's not exactly what I want to do. I already have a code that works smoothly for Android and Ios.

final pdf = pw.Document();

pdf.addPage(pw.Page( pageFormat: PdfPageFormat.a4, build: (pw.Context context) { return pw.Center( child: pw.Text("Hello World"), ); // Center })); // Page

var uint8 = await pdf.save();

It looks like this. What I want to do is use https://pub.dev/packages/isolated_worker for the long save process. But this requires javascript code that does the saving.

But I don't know how to create javascript code

[goventtr]

You can try JsPDF and its plugin like autoTable in my example. I'm using Bloc State Management with isolated_worker here. This code below is the js code. Hope it helps.

`function exportPDF(/* params if needed */) { const { jsPDF } = jspdf;

var doc = new jsPDF();

var arrayForTable = [];

doc.setFontSize(18);
doc.setFont('times', 'bold');
doc.text('Title Here', 105, 32.5, 'center');

doc.setFontSize(10);
doc.setFont('times', 'normal');
doc.text('Subtitle Here', 52.5, 50.5, 'center');

for (var i = 0; i < 1000; i++) {
    arrayForTable.push([
        i + 1,
        25 August 2022,
        "Jhon Doe",
    ]);
}

doc.autoTable({
    head: [['ID', 'Date', 'Name']],
    body: arrayForTable,
    theme: 'plain',
    styles: {
        font: 'times',
        fillColor: 'white',
        textColor: 'black',
        lineColor: 'black',
        lineWidth: 0.2,
        valign: 'middle',
    },
    headStyles: {
        halign: 'center',
        fontStyle: 'bold',
        cellPadding: {
            left: 0,
            right: 0,
            top: 2,
            bottom: 2,
        }
    },
    startY: 52.5,
    margin: {
        top: 25,
        bottom: 30,
        left: 8,
        right: 8,
    },
    columnStyles: {
        0: {
            cellWidth: 10.5,
            halign: 'center',
        },
        1: {
            cellWidth: 15.5,
            halign: 'center',
            cellPadding: {
                left: 1,
                right: 1,
                top: 2,
                bottom: 2,
            },
        },
        2: {
            cellWidth: 52,
        },
    },
    rowPageBreak: 'avoid',
});

var pdf = doc.output('arraybuffer');

var uint8 = new Uint8Array(pdf);

return uint8; // Return Uint8 to Bloc}

Can you share some more code? How to write flutter code. I did some trials but I get an error even though I added the jsPDF library in index.html

[myselfuser1]

This will help https://www.youtube.com/watch?v=LLBoRBAQIw0

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[github-actions[bot]]

Closing this stale issue because it has no activity.