3

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.

BestRazer
  • 187
  • 1
  • 3
  • 14

1 Answers1

1

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

Alex Radzishevsky
  • 3,416
  • 2
  • 14
  • 25
  • Thank you for your answer. I have access to the server where the pdfs are stored but how can I configure CORS on it? My app is hosted in firebase so I don't think I can deploy a proxy on it or can I? – BestRazer May 26 '21 at 18:27
  • Then I think you can configure CORS on Firebase storage. See https://stackoverflow.com/questions/47768136/cors-on-firebase-storage or https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin/37765371 for similar questions – Alex Radzishevsky May 26 '21 at 18:46
  • Do I really have to use Firebase storage for it? I already have an android version of my app and I have to switch the pdf files a plenty of times. It wouldn't want to do that on the old server and on firebase storage. Also, all users would have to update the app and many users use a pretty old version which pulls the files from the server. – BestRazer May 27 '21 at 09:40
  • You can use whatever storage you like. If you have storage files hosted on the same domain as your app, then you are fine and files will be accessible without need of extra CORS configuration (except localhost debuging, which can be solved easy). If your files are on different domain, then you need storage that allows you to configure CORS. – Alex Radzishevsky May 27 '21 at 10:24
  • To me, it looks like the server is already configured for CORS. I found this in the "Network" tab of the developer tools when looking at the PDF stored on the server: https://imgur.com/a/Xn2UYs0 – BestRazer May 28 '21 at 14:03
  • And that is an issue: look at your "access-control-allow-origin" header - it will allow only for domain "test", which is I believe not your real domain. To make it work, it should be something like "https://.com" – Alex Radzishevsky May 28 '21 at 14:17
  • I've got to change this via an .htaccess file. In the Chrome developer tools, it now shows the address of my webapp: https://imgur.com/a/KulETMk but in the Edge developer tools it shows this: https://imgur.com/a/MdGwxVI which shouldn't be a problem tho. It still doesn't work. Does this `strict-origin-when-cross-origin` in this image https://imgur.com/a/KulETMk matter? – BestRazer May 29 '21 at 11:51
  • Read more here: https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default – Alex Radzishevsky May 29 '21 at 11:59
  • So if I understood this right, it's just a browser thing and shouldn't have to do anything with the PDF on the server. Why doesn't it still work then? CORS is set up, I think. – BestRazer May 29 '21 at 13:57
  • It is combination of browser and CORS headers that are coming from server. I tried SfPdfViewer lib on firefox browser with extension that allows you to turn of CORS checking and can confirm that everything works fine. You should research more on finding out correct CORS config on your server hosting PDFs – Alex Radzishevsky May 29 '21 at 15:32
  • I've now got to host it on the same server as the PDF files. How can I reference the PDFs there now? I've tried it like this: http://example.com/files/file1.pdf, /file/file1.pdf, ../file/file1.pdf. CORS shouldn't matter now, right? – BestRazer May 30 '21 at 16:03
  • You better know how to reference them. It all depends on server setup. – Alex Radzishevsky May 30 '21 at 16:34