flutter_html_to_pdf icon indicating copy to clipboard operation
flutter_html_to_pdf copied to clipboard

how can i add margin or padding(for bottom and top) in page?? is there any option for page format (A4,letter,a3,a5,legal)?

Open bhaumik1111 opened this issue 1 year ago • 6 comments

bhaumik1111 avatar Jan 02 '24 17:01 bhaumik1111

This PR has support for page format. https://github.com/Afur/flutter_html_to_pdf/pull/81

or you can use my fork.

Margin and padding does not have support.

raister21 avatar Jan 04 '24 08:01 raister21

is there any logic for padding margin? apply on html content?

bhaumik1111 avatar Jan 04 '24 08:01 bhaumik1111

This package does not support header/footer or paddings on html content.

Instead you can Add your own Header and Footer on the html itself. apply the padding and margin to the html itself, that should work

raister21 avatar Jan 04 '24 09:01 raister21

i am new to flutter ! how can i do this? pls give mesuggestion for it any demo code or something

bhaumik1111 avatar Jan 04 '24 09:01 bhaumik1111

add this to your pubspec.yaml file

flutter_html_to_pdf:
    git:
      url: https://github.com/raister21/flutter_html_to_pdf

After that you can use the Updated version of this package. Which I am currently hosting through my GitHub, you can look into forking if you want to have a copy of my version of this package.

how can i do this?

In your Project,

final String htmlContent = """
    <!DOCTYPE html>
    <html>
      <head>
        <style>
        table, th, td {
          border: 1px solid black;
          border-collapse: collapse;
        }
        th, td, p {
          padding: 5px;
          text-align: left;
        }
        </style>
      </head>
      <body>
        <h2>PDF Generated with flutter_html_to_pdf plugin</h2>
        
        <table style="width:100%">
          <caption>Sample HTML Table</caption>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>January</td>
            <td>100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>50</td>
          </tr>
        </table>
        
        <p>Image loaded from web</p>
        <img src="https://i.imgur.com/wxaJsXF.png" alt="web-img">
      </body>
    </html>
    """;

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

final generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlContent(
  htmlContent: htmlContent,
  printPdfConfiguration: PrintPdfConfiguration(
    targetDirectory: targetPath,
    targetName: targetFileName,
    printSize: PrintSize.A4,
    printOrientation: PrintOrientation.Portrait,
  ),
);

The htmlContent is what you will be printing. Whatever renders when you open the htmlContent on a web browser should be your expected results in pdf (generatedPdfFile).

raister21 avatar Jan 04 '24 13:01 raister21

all those changes have been merged into this repo

penkzhou avatar Jan 22 '24 12:01 penkzhou