Internal Navigation in PDF using syncfusion package in flutter

Viewed 154

I've been working on an App in flutter to generate a PDF file containing a list of indexes and its corresponding content portions. What I want to achieve is to navigate to the specific contents while clicking on the index elements. I followed the documentation here: https://help.syncfusion.com/flutter/pdf/working-with-hyperlinks, but it didn't solved my issue.

import 'dart:ui';

import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';   
import 'dart:io';
import 'package:share/share.dart';
import 'package:lorem_ipsum/lorem_ipsum.dart';
import 'package:syncfusion_flutter_pdf/pdf.dart';

reportView(context) async {
  PdfDocument document = PdfDocument();
  PdfPage firstPage = document.pages.add();
  PdfPage secondPage = document.pages.add();
     

  Rect firstRectangle = Rect.fromLTWH(0, 0, 150, 100);
  Rect secondRectangle = Rect.fromLTWH(170, 100, 0, 0);

  //Contents for first page
  firstPage.graphics.drawString(
      'Hello World!!!', PdfStandardFont(PdfFontFamily.helvetica, 27),
      brush: PdfBrushes.darkBlue, bounds: firstRectangle);

  //Contents for second page
  secondPage.graphics.drawString(
      loremIpsum(words: 60, paragraphs: 3, initWithLorem: true), PdfStandardFont(PdfFontFamily.helvetica, 27),
      brush: PdfBrushes.darkBlue,bounds: secondRectangle);


  //Creating the first annotation
  PdfDocumentLinkAnnotation firstAnnotation = new PdfDocumentLinkAnnotation(firstRectangle,PdfDestination(secondPage));
  firstPage.annotations.add(firstAnnotation);

  //Creating the second annotation
  PdfDocumentLinkAnnotation secondAnnotation = new PdfDocumentLinkAnnotation(secondRectangle,PdfDestination(firstPage));
  firstPage.annotations.add(secondAnnotation);

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

I can't seem to find any clickable points in my final generated PDF. What am i doing wrong here? Is there something else i have to do for the proper working of internal navigation?

1 Answers

At present we do not have support draw appearance for document link annotation. So we suggest you to draw the clickable points using page graphics as below.

//Create PDF document
PdfDocument document = PdfDocument();
//Add pages
PdfPage firstPage = document.pages.add();
PdfPage secondPage = document.pages.add();

Rect firstRectangle = Rect.fromLTWH(0, 0, 150, 100);
Rect secondRectangle = Rect.fromLTWH(170, 100, 150, 100);

//Contents for first page
firstPage.graphics.drawString(
    'Hello World!!!', PdfStandardFont(PdfFontFamily.helvetica, 27),
    brush: PdfBrushes.darkBlue, bounds: firstRectangle);

//Contents for second page
secondPage.graphics.drawString(
    'second page text', PdfStandardFont(PdfFontFamily.helvetica, 27),
    brush: PdfBrushes.darkBlue, bounds: secondRectangle);

//Creating the first annotation
PdfDocumentLinkAnnotation firstAnnotation = new PdfDocumentLinkAnnotation(
    firstRectangle, PdfDestination(secondPage));
firstPage.annotations.add(firstAnnotation);

//Draw appearance.
firstPage.graphics
    .drawRectangle(bounds: firstRectangle, pen: PdfPens.black);

//Creating the second annotation
PdfDocumentLinkAnnotation secondAnnotation = new PdfDocumentLinkAnnotation(
    secondRectangle, PdfDestination(firstPage));
firstPage.annotations.add(secondAnnotation);

//Draw appearance.
firstPage.graphics
    .drawRectangle(bounds: secondRectangle, pen: PdfPens.black);

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

Also the second document link annotation added with the width and height of 0,0, due to that the annotation is not configured properly. We have changed the bounds too for the above code.

Related