PDF.js using Fancybox3

JavaScript
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

1 Like
5

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

6

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