PDF.js using Fancybox3


#1

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?


#2

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


#3

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.


#4

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


#5

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