Synfusion flutter pdf viewer not showing PDF in flutter web

[Muhammad Musa]

I am syncfusion_flutter_pdfviewer: ^23.1.43 for flutter web for loading PDFs, in debug mode it is working but in release mode when i release the build and deploy it, then when I generate PDF, grey screen showed without PDF, without any exception or errors. 

I have added this in index.html 

  <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script>
  <script type="text/javascript">
   pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js";
</script>

but still it is showing error.

This is how i am showing PDF 

Expanded(
  child: SfPdfViewer.memory(uint8List),
),

and this is how i am generating PDF content

generatePdf(GetPdfListLoaded state) async {
  final PdfDocument document = PdfDocument();
  final PdfPage page = document.pages.add();
  page.graphics.drawString(
    'Orders: ${widget.name}',
    PdfStandardFont(PdfFontFamily.helvetica, 10),
    brush: PdfBrushes.black,
    bounds: Rect.fromLTWH(
      0,
      0,
      page.getClientSize().width / 2,
      30,
    ),
  );

  page.graphics.drawString(
    'Date: ${DateTime.now().toNamedDateString()}',
    PdfStandardFont(PdfFontFamily.helvetica, 10),
    brush: PdfBrushes.black,
    bounds: Rect.fromLTWH(
      page.getClientSize().width * 0.7,
      0,
      page.getClientSize().width,
      25,
    ),
  );

  final PdfGrid grid = PdfGrid();
  // Specify the grid column count.
  grid.columns.add(count: 5);
  // Add a grid header row.
  final PdfGridRow headerRow = grid.headers.add(1)[0];
  headerRow.cells[0].value = 'Order Id';
  headerRow.cells[1].value = 'Order Amount';
  headerRow.cells[2].value = 'Status';
  headerRow.cells[3].value = 'Products';
  headerRow.cells[4].value = 'Date';
  // Set header font.
  headerRow.style.font = PdfStandardFont(PdfFontFamily.helvetica, 10, style: PdfFontStyle.bold);
  // Add rows to the grid.

  for (int i = 0; i < state.getOrdersForPdfModel.data.length; i++) {
    PdfGridRow row = grid.rows.add();
    row.cells[0].value = state.getOrdersForPdfModel.data[i].orderId;
    row.cells[1].value = state.getOrdersForPdfModel.data[i].orderTotalPrice.toString();
    row.cells[2].value = state.getOrdersForPdfModel.data[i].deliveryStatus;
    String productName = '';
    for (int j = 0; j < state.getOrdersForPdfModel.data[i].productDetails.length; j++) {
      productName =
          'Name: ${state.getOrdersForPdfModel.data[i].productDetails[j].productName.toString()},\nQuantity: ${state.getOrdersForPdfModel.data[i].productDetails[j].quantity.toString()}' +
              '\n\n\n' +
              productName;
    }
    row.cells[3].value = productName;
    row.cells[4].value = state.getOrdersForPdfModel.data[i].createdAt.toDateTime().toNamedDateString();
    row.cells[3].style.font = PdfStandardFont(PdfFontFamily.helvetica, 6, style: PdfFontStyle.regular);
  }

  grid.style.cellPadding = PdfPaddings(left: 5, top: 5);
  // Draw table in the PDF page.
  grid.draw(
    page: page,
    bounds: Rect.fromLTWH(
      0,
      70,
      page.getClientSize().width,
      page.getClientSize().height,
    ),
  );

  //Save the document
  pdfBytes = await document.save();

  //
  // document.dispose();
}

[Deepika Ravi]

We tried to reproduce reported issue with provided details, but the PDF document loaded properly in SfPdfViewer on our end. For your reference, we have attached the tested sample and it can be download from the attachment. Please check the sample and let us know if you are still experiencing the issue on your end. If so, please provide a modified sample that reproduces the issue. Also, we suspect it may be specific to a certain document, so kindly share the PDF document.

Attachment: fourm_185430_9cb14e8e.zip

[Muhammad Musa]

In debug mode, it is working properly, but when i release the app using flutter web build command with web renderer as html, not canvas kit, then going to the PDF viewer screen, it is showing me the white screen without PDF. Let me share the video as well. And also, i also tried to release the build using canvas kit which was also causing the same issue of white screen in PDF.

This is the command I used for build file of release mode.

flutter build web --release --web-renderer html

Attachment: Screen_Recording_20231117_at_10.12.04_AM_7cd18569.zip

[Muhammad Musa]

Okay i have found the issue, the issue was with font family, there are arabic texts which was causing issue, I have used the standard font before, now i have changed font family, using arial, PDF is working now but the issue is that arabic words are not connected rather a single single letter. Which font family is supportive for both english and arabic in PDF view?

[Karmegam Seerangan]

The font used “Arial” supports both English and Arabic language characters.

Kindly use the following UG link to preserve right to left language characters like Arabic in the PDF document.

https://help.syncfusion.com/flutter/pdf/working-with-text#drawing-right-to-left-text