Unable to use this library in iOS app due to margin Issue while creating PDF.

jazzbpn commented 5 years ago

class _MyAppState extends State<MyApp> {
  String generatedPdfFilePath;

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

  Future<void> generateExampleDocument() async {
    var htmlContent = '<!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; } nav { float: left; width: 30%; background: #ccc; padding: 20px; } nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; } section:after { content: ""; display: table; clear: both; } footer { background-color: #777; padding: 10px; text-align: center; color: white; } </style> </head> <body bgcolor="#E6E6FA"> <header> <h2>Cities</h2> </header> <section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h2>CSS Layout Float</h2> <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p> <p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <h2>CSS Layout Float</h2> <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p> <p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <h2>CSS Layout Float</h2> <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p> <p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> </section> <footer> <p>Footer</p> </footer> </body> </html>';

    Directory appDocDir = await getApplicationDocumentsDirectory();
    var targetPath = appDocDir.path;
    var targetFileName = "example-pdf";

    var generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlContent(
      htmlContent,
      targetPath,
      targetFileName,
    );
    generatedPdfFilePath = generatedPdfFile.path;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: Text("Open Generated PDF Preview"),
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => PDFViewerScaffold(
                    appBar: AppBar(title: Text("Generated PDF Document")),
                    path: generatedPdfFilePath)),
          ),
        ),
      ),
    ));
  }
}

I have elaborate the question at Stackoverflow

joeblew99 commented 5 years ago

The only way i can think of is to use css page breaks.

https://www.sitepoint.com/css-printer-friendly-pages/

jazzbpn commented 5 years ago

Works only in android not in iOS.

pboethig commented 5 years ago

What about IOS?

risalgue commented 4 years ago

This problem still exists in iOS Device

Afur commented 4 years ago

Hi, You should use page break to avoid this issue. It’s not related with the plugin directly Take a look https://www.w3schools.com/cssref/pr_print_pageba.asp

Afur / flutter_html_to_pdf

Unable to use this library in iOS app due to margin Issue while creating PDF. #17