flutter_html_to_pdf Generated report cut in half on iOS, correct on Android

Generated report cut in half on iOS, correct on Android

Open dominolog opened this issue 3 years ago • 5 comments

I use below html to generate pdf.

<!DOCTYPE html>
<html>
<head>
    <style>
      body {
          font-family: Arial;
      }
      p {
          color: #000000;
      }
      h4 {
          color: #000000;
      }
      h2 {
          color: #000000;
      }
      h1 {
          color: #9c0054;
      }

      a {
           color: #9c0054;
      }

      .main {
        text-align: center;
      }


    </style>
</head>
<body>
<div class="main">
    <br/><br/><br/>
    <h2>Wynik FIB-4</h2>
    <h3>wygenerowany przez aplikację FIB-4 Kalkulator</h3>
    <br/>
    <h1>{{result}}</h1>
    <br/>
    <p>{{description}}</p>
    <p>
        <a href="https://www.mp.pl/medycynarodzinna/wytyczne/218262,zalecenia-polskiej-grupy-ekspertow-nafld-2019">Zalecenia
            Polskiej Grupy Ekspertów NAFLD 2019. Medycyna Praktyczna 10/2019.</a></p>
</div>
</body>
</html>

The code for generation as below:

void prepareReportAndSend() async {
    String report = await rootBundle.loadString("assets/pages/result.html");
    report = report.replaceAll("{{result}}", resultText)
               .replaceAll("{{description}}", descText);
    Directory tempDir = await getTemporaryDirectory();
    String tempPath = tempDir.path;
    var generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlContent(
        report, tempPath, "raport_fib-4");
    var additionalFile = globals.attachementFile.path;
    var body = "Dzień dobry\n\nW załączeniu Twój wynik FIB-4 oraz ulotka informacyjna „Czym grozi stłuszczenie Wątroby?”, a także zalecenia dietetyczne opracowane przez specjalistę.";
    await sendEmailAsync(
        "FIB-4 wynik", [], body, [generatedPdfFile.path, additionalFile]);
  }

The problem is the generated report is incorrect on iOS. The PDF looks like cut. It works correct on Android. Any ideas? raport_IOS.pdf raport_Android.pdf