是否可以在flutter中将html模板转换为PDF文件

问题描述 投票:0回答:2

可以将 HTML 文件转换为 pdf 吗?

我有一个现成的HTML模板表单,并且我有一个flutter页面作为表单填写,我想在填写表单后获取数据并用HTML模板编译并将其转换为PDF。

可以这样做吗?

我现在正在做的是:在flutter应用程序中填写表单,将数据保存在firebase中,nodejs函数获取数据并使用html模板进行编译,然后将其提取为PDF并通过电子邮件发送。

flutter flutter-dependencies flutter-packages flutter-html
2个回答
2
投票

虽然问题可能有点宽泛,但我们还是简单回答一下吧。

可以将 HTML 文件转换为 pdf 吗?

是的,是的。

使用 flutter_html_to_pdf 会让您变得轻松。


示例:

◾ HTML 字符串:

final 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>
""";

因此:

final generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlContent(
    htmlContent, targetPath, targetFileName,);

◾ HTML 文件:

final file = File("assets/html/example.html");
final generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlFile(
    file, targetPath, targetFileName,);

◾ HTML 文件路径:

final filePath = "assets/html/example.html";
final generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlFilePath(
    filePath, targetPath, targetFileName,);

在您的情况下,文件应根据提供的

targetPath
保存,因此您可以访问它并将其作为电子邮件发送。


0
投票

如果您想要更好的CSS支持,那么您可以使用方法通道,对于Android您可以使用以下类PdfConverter.java。 将该类放在

android/app/src/main/java/android/print/
中。

下面是它的示例用法:

在您的 Flutter 代码中添加以下方法:

Future<void> generatePDF(String html, String filename) async {
    const MethodChannel channel = MethodChannel('[Your Package Name]');
    try {
        String directoryPath = '/storage/emulated/0/';
        String fileName = '$filename.pdf';
        String pdfPath = '$directoryPath$fileName';
        bool result = await channel
            .invokeMethod('generatePDF', {'html': html, 'path': pdfPath});
    } on PlatformException {
        return;
    }
}

修改MainActivity.java:

package [Your Package Name];

import android.content.Context;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "[Your Package Name]";

    @Override
    public void configureFlutterEngine(FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        Context context = this; // Get the application context
        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
                .setMethodCallHandler(
                        (call, result) -> {
                            if (call.method.equals("generatePDF")) {
                                String html = call.argument("html");
                                String path = call.argument("path");
                                PDFGenerator.generatePDF(context, html, path); // Pass context here
                                result.success(true);
                            } else {
                                result.success(false);
                            }
                        }
                );
    }
}

创建一个类 PDFGenerator.java:

package [Your Package Name];

import android.content.Context;
import android.print.PdfConverter;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

public class PDFGenerator {

    public static void generatePDF(Context context, String html, String outputPath) {
        PdfConverter converter = PdfConverter.getInstance();
        File file = new File(outputPath);
        converter.convert(context, html, file);
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.