Using syncfusion_flutter_pdfviewer with flutter web

Viewed 410

The package syncfusion_flutter_pdfviewer just released on May 19th and I wanted to use it to port my app into web but it doesn't work. My code looks like this:

class _VPMontagState extends State<VPMontag> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('mytext'),
      ),
      body: Container(
        child: SfPdfViewer.network('myurl'),
      )
    );
  }
}

They also wrote in their documentation that you should add

<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>

into the index.html. I did that and it didn't work anyways.

1 Answers

99% chance that you are having CORS related issue. PDF viewer tries to load PDF which is on different domain than your application (or localhost).

In order to fix this, you have few options:

  • either use proxy deployed on same domain as yours, that will re-route calls to PDFs
  • if you have access to storage server where PDFs are stored, you might configure CORS on it

Basically you are having similar issues to displaying external images on canvaskit renderer. (In your case this is actual for HTML renderer also as it looks like PDF viewer loads PDFs using AJAX). See here for details

Related