时间戳

首页 > 解决方案 > 如何在flutter中动态地将内部导航添加到pdf

flutter - 如何在flutter中动态地将内部导航添加到pdf

问题描述

我正在开发一个颤振应用程序，它使用 pdf 库（https://pub.dev/packages/pdf/changelog）在颤振中生成 PDF 文件。我需要创建一个包含目录的 pdf 文件。它们应与实际内容链接，并在单击时导航到各自的页面。我在网上找不到任何使用 pdf 库执行此操作的文档。PDF 将被写入文件，因此 Flutter 中的 PDF 查看器对我也没有用处。有人可以帮我吗

[更新] 我尝试在我的代码中使用Link和Anchor 。但它似乎不起作用。难道我做错了什么？

reportView(context) async {
  final Document pdf = Document();

  final ByteData fontData =
      await rootBundle.load("assets/fonts/Open_Sans/OpenSans-Regular.ttf");

  final Font ttf = Font.ttf(fontData);
  final textStyle = TextStyle(font: ttf);

  final Wrap item = Wrap(children: await _buildPdfBlock(textStyle));

  pdf.addPage(
    MultiPage(
      pageFormat:
          PdfPageFormat.letter.copyWith(marginBottom: 1.5 * PdfPageFormat.cm),
      crossAxisAlignment: CrossAxisAlignment.start,
      build: (Context context) => [item],
    ),
  );

  _index(
    context,
    pdf,
    textStyle,
  );

  _contents(context, pdf, textStyle);

  final String dir = (await getApplicationDocumentsDirectory()).path;
  final String path = '$dir/App_' + '.pdf';
  final File file = File(path);
  print(path);
  await file.writeAsBytes(pdf.save());
  await Share.shareFiles([path]);
}

Future<List<Widget>> _buildPdfBlock(TextStyle textStyle) async {
  List<Widget> list = [];
  Column column = Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Header(level: 1, child: Text("PDF Generation", style: textStyle)),
        Text("Hello World", style: textStyle)
      ]);
  list.add(column);
  return list;
}

void _index(dynamic context, Document pdf, TextStyle textStyle) {
  List<Widget> indexList = [];
  var indexNumber = 1;
  for (var i = indexNumber; i < 10; i++) {
    Text indexText = Text(indexNumber.toString() + ". " + "Hello$indexNumber",
        style: textStyle);
    Link(
        child: indexText,
        destination: indexNumber.toString() + ". " + "Hello$indexNumber");
    indexList.add(indexText);

    indexNumber++;
  }
  pdf.addPage(
    MultiPage(
      pageFormat:
          PdfPageFormat.letter.copyWith(marginBottom: 1.5 * PdfPageFormat.cm),
      crossAxisAlignment: CrossAxisAlignment.start,
      build: (Context context) => indexList,
    ),
  );
}

void _contents(dynamic context, Document pdf, TextStyle textStyle) {
  List<Widget> contentList = [];
  var contentNumber = 1;
  for (var i = contentNumber; i < 10; i++) {
    Header contentIndex = Header(
        child: Text(contentNumber.toString() + ". " + "Hello$contentNumber",
            style: textStyle));
    Text content = Text("               " +
        loremIpsum(words: 60, paragraphs: 3, initWithLorem: true));

    Anchor(
        name: contentNumber.toString() + ". " + "Hello$contentNumber",
        child: contentIndex);
    contentList.add(contentIndex);
    contentList.add(content);

    contentNumber++;
  }
  pdf.addPage(
    MultiPage(
      pageFormat:
          PdfPageFormat.letter.copyWith(marginBottom: 1.5 * PdfPageFormat.cm),
      crossAxisAlignment: CrossAxisAlignment.start,
      build: (Context context) => contentList,
    ),
  );
}

[更新]它现在可以工作了，我的实现是错误的。谢谢您的帮助

标签： flutterpdfpdf-generation

解决方案

您可以使用PDF中dart_pdf的代码创建这样的页面：AnchorLink

Anchor首先在要链接到的页面上创建一个：

Anchor(name: 'my_first_anchor'),

然后您可以像这样在目录中引用该锚点：

Link(destination: 'my_first_anchor'),

显然，锚名称必须是唯一的。

推荐阅读