PDF.js using Fancybox3

I try to add PDF viewer using Fancybox. How to manage this in the correct way?
Need help.

My example and demo:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="google" content="notranslate">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PDF.js viewer</title>


    <link rel="stylesheet" href="https://mozilla.github.io/pdf.js/web/viewer.css">

    <script src="https://mozilla.github.io/pdf.js/web/compatibility.js"></script>
    <script src="https://mozilla.github.io/pdf.js/web/viewer.js"></script>

  </head>

  <body>
<a data-fancybox data-type="iframe" data-src="https://mydomain.com/mypdf.pdf" href="javascript:;"> Sample PDF file </a>

  </body>
</html>

How to manage PDF viewer in this case?

Define ‘manage’. What are you trying to do that it’s not currently doing?

Thank you for your question. I like to show my PDF and brochure inside Fancybox POP-UP window. It will not work to show POP-UP window and also a PDF viewer. I’m not sure but there is a lack of information when you try to show PDF inside my browser.

It is working example: https://codepen.io/fancyapps/pen/qoKGRW?editors=1000

But I can not replicate.
Check Sample PDF file.

It looks like you’ll need to create a local version of the ‘viewer.html’ page to load the actual PDF file (notice in the Codepen example they link to https://mozilla.github.io/pdf.js/web/viewer.html rather than directly to the PDF file.
I had a quick look and there’s a relatively simple version of the viewer page at: https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld.html you can see on line 20 where they link to the PDF file

1 Like

I have tested with the absolute path for my PDF. This link will not work when pretesting is done.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.