求推荐Flutter Web端可将HTML/Markdown转PDF的第三方包

方案1：结合flutter_html与printing库 #

虽然printing不直接支持HTML转PDF，但可以通过flutter_html将HTML渲染为Flutter Widget，再用printing生成PDF：

• 步骤：

  1. 替换模板中的<BUYER_DATA>等占位符为实际交易数据，得到完整HTML字符串
  2. 用flutter_html的Html组件将HTML转为Widget
  3. 调用printing的layoutPdf方法，将Widget树转为PDF并触发下载

  代码示例：

  import 'package:flutter_html/flutter_html.dart';
  import 'package:printing/printing.dart';
  import 'package:pdf/pdf.dart';
  import 'package:pdf/widgets.dart' as pw;
  
  Future<void> generatePdfFromHtml(String htmlContent) async {
    final htmlWidget = Html(data: htmlContent);
    
    await Printing.layoutPdf(
      onLayout: (PdfPageFormat format) async {
        final doc = pw.Document();
        doc.addPage(
          pw.Page(
            build: (context) => pw.WidgetPlaceholder(child: htmlWidget),
          ),
        );
        return doc.save();
      },
    );
  }
  

  注意：flutter_html对复杂CSS的支持有限，需测试模板样式的兼容性。

方案2：调用浏览器原生API（通过dart:js） #

如果Flutter包的渲染效果不够理想，可以直接利用浏览器的HTML转PDF能力，借助html2pdf.js实现：

• 步骤：

  1. 替换占位符得到完整HTML
  2. 通过dart:js调用JS函数生成PDF并下载
  3. 在web/index.html中引入html2pdf.js脚本

  Dart代码：

  import 'dart:js' as js;
  
  void downloadPdfFromHtml(String htmlContent) {
    js.context.callMethod('generatePdf', [htmlContent]);
  }
  

  web/index.html中的JS代码：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
    function generatePdf(html) {
      const container = document.createElement('div');
      container.innerHTML = html;
      document.body.appendChild(container);
      html2pdf().from(container).save('transaction_report.pdf');
      document.body.removeChild(container);
    }
  </script>
  

  该方案对复杂HTML和样式支持更好，完全复用浏览器渲染能力。

方案3：自行解析HTML转PDF Widget #

如果上述方案都不满足需求，可以基于html解析包和pdf库，自行实现HTML到PDF Widget的转换：

• 核心逻辑：

  1. 用html包解析HTML字符串，遍历DOM节点
  2. 将HTML标签映射为pdf库的对应Widget（如<p>→pw.Text，<table>→pw.Table）
  3. 转换CSS样式为PDF Widget的样式属性（字体、颜色、对齐等）
  4. 解析时替换占位符，同时处理分页逻辑填充<PAGE_NO>和<PAGES_COUNT>

  示例代码（简单解析）：

  import 'package:html/parser.dart' show parse;
  import 'package:pdf/pdf.dart';
  import 'package:pdf/widgets.dart' as pw;
  import 'package:printing/printing.dart';
  
  pw.Widget parseHtmlToPdfWidget(String html, Map<String, String> data) {
    final dom = parse(html);
    final widgets = <pw.Widget>[];
  
    for (final element in dom.body?.children ?? []) {
      if (element.localName == 'p') {
        var text = element.text;
        data.forEach((key, value) => text = text.replaceAll('<$key>', value));
        widgets.add(pw.Text(text, style: pw.TextStyle(fontSize: 14)));
      }
      // 扩展其他标签（h1-h6、table、div等）的解析逻辑
    }
  
    return pw.Column(children: widgets);
  }
  
  Future<void> generateCustomPdf(String html, Map<String, String> data) async {
    final pdfWidget = parseHtmlToPdfWidget(html, data);
    final doc = pw.Document();
    doc.addPage(pw.Page(build: (context) => pdfWidget));
    await Printing.sharePdf(bytes: await doc.save(), filename: 'report.pdf');
  }
  

  该方案需要自行实现更多标签和样式的适配，适合高度定制化的场景。

内容的提问来源于stack exchange，提问作者il_boga