flutterazureazure-blob-storagesyncfusion

syncfusion_flutter_pdfviewer issue: doesn't show pdf on website

I have a flutter front-end website where I'm trying to display a pdf on the website using syncfusion_flutter_pdfviewer 26.1.39 (*keep in mind: not open source). I'm trying to show a pdf from azure blob storage (using an SAS token) but I can't get any pdf to display on the website, much less the pdf from azure blob storage.

I have the relevant code in uploaded.dart:

import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'package:http/http.dart' as http;
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

class UploadedPage extends StatefulWidget {
  final String signedUrl;
  const UploadedPage({
    super.key,
    required this.signedUrl,
  });

  @override
  State<UploadedPage> createState() => _UploadedPageState();
}

class _UploadedPageState extends State<UploadedPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const LogoAppBar(),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SfPdfViewer.network(
              'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'),
              SfPdfViewer.network(
              widget.signedUrl),
            ],
          ),
        ),
      ),
    );
  }
}

and the following in web/index.html:

<!DOCTYPE html>
<html>
<head>
  <base href="/web/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="ffint">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>ffint</title>
  <link rel="manifest" href="manifest.json">
  <!-- <script src="https://cdn.syncfusion.com/ej2/19.4.50/dist/ej2.min.js"></script> -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
  <script type="text/javascript">
    pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js";
  </script>

</head>
<body>
  <script src="flutter_bootstrap.js" async></script>

</body>
</html>

signedUrl has my azure blob storage url (with the SAS token) meaning that the URL actually downloads the pdf, which I thought might be the issue. However, even when running with 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', which has no issues opening, the pdf does not display at all. There is not even a blank space reserved for the pdf.

I also tried with uploading from assets, which also didn't seem to work. I'm not sure if it is an issue with my code or there is some syncfusion setting I did not do (I have an account which I did not use/log-in anywhere, if that is relevant).

Solution

  • The below code is to display the PDF document from the SAS URL of Azure Storage using the Syncfusion Flutter PDF Viewer. Modify your Flutter code as shown below to display the PDF on your website.

    The code below integrates the Syncfusion PDF Viewer (SfPdfViewer) within your PdfViewerWidget class in lib/main.dart.

    (widget_test.dart) verifies that the app contains the title and the SfPdfViewer widge to display the PDF viewer .

    import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Syncfusion PDF Viewer Example'),
        ),
        body: PdfViewerWidget(),
      ),
    );
  }
}

class PdfViewerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Replace this with the URL of your PDF document
    const String pdfUrl = 'https://AzureStorageName.blob.core.windows.net/AzureContainerNamw/sample-3.pdf?BlobSAS token';

    return SfPdfViewer.network(
      pdfUrl,
   
      // password: 'your_password_here',
    );

    

    return SfPdfViewer.asset(
      'assets/flutter-succinctly.pdf',
     
      // password: 'your_password_here',
    );
        return SfPdfViewer.file(
      File('file_path_here'),
  
      // password: 'your_password_here',
    );
   
    return SfPdfViewer.memory(
      bytes,
    
      // password: 'your_password_here',
    );
  
  }
}

    widget_test

    import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
import 'package:my_flutter_app/main.dart';

void main() {
  testWidgets('Testing Syncfusion Flutter PDF Viewer Example', (WidgetTester tester) async {
    
    await tester.pumpWidget(MyApp()); // Remove the `const` keyword here

   
    expect(find.text('Syncfusion Flutter PDF Viewer Example'), findsOneWidget);

    
    expect(find.byType(SfPdfViewer), findsOneWidget);

    
  });
}

    web/index.html

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Syncfusion PDF Viewer Example</title>
</head>

<body>
  <!-- Your Flutter app's content will be rendered here -->
  <script src="main.dart.js" type="application/javascript"></script>

  <!-- Include PDF.js scripts -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
  <script type="text/javascript">
    // Configure PDF.js worker source
    pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js";
  </script>
</body>

</html>

    enter image description here

    Flutter Output: enter image description here

    Azure Storage SAS URL Output:

    enter image description here