Getting started example only show a set of nested iframe without content

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7.4

Detailed description of issue
I’m just setting up a starting point to display a pdf in a html document using your documentation here PDF.js Express Viewer Download & Integration | Documentation
After following al required stesp, my browser shows only a set of nested iframes without any pdf

Expected behaviour
Display of selected pdf file

Does your issue happen with every document, or just one?
I’ve tried local pdf and base64 string without success

Link to document
{Provide a link to the document in question if possible}

Code snippet
my source code is the following:

<!DOCTYPE html>
<html>
<head>
  <title>PDF.js Express</title>
</head>
<!-- Import PDF.js Express as a script tag from the lib folder using a relative path -->
<script src='/lib/webviewer.min.js'></script>
<style>
  #viewer{width:1024px,height:600px,margin:0 auto;}
</style>

<body>
  <div id='viewer'></div>

  <script>
			const myBase64String = "JVBERi0xLjUKJeLjz9MKMyAwIG9iago8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvTGVuZ3RoIDQxOT4+c3RyZWFtCnicpZJNb9swDIbv+hU8doe0khJ/9EhbrKtAFh1JCTAPO61YgQE9bGf9+MlugrXF1g2YD7Kgl6T4PqIEBRsFEmqly/rlSXwXXRLbGqqmhvQgKImD0LBfTpc4CZfo9CRu7hQoCemruPqQvi2xv0LWYq+SqlZfN2/y5Kr+eBRXutJabaSUtxstVbvpsiFHA/aWPTiMMFqPMXfs0c+YHUfoORgKNpWtIcDhiNA7DJhrqWRpsamWcqccrTtZhBEHg448guOJZog4duwwj5TQndeJQ2JPMeuSKq+lzEov1iQ8/sbep8/l/7Diedd43bxvXDaL8ebZuAkvnRuaMCQcyZf2YAjo0WA2NljMQzhODJGdNRgsX1RYVSAHGAJ/5Kzbna7lbtsung45sl9phMKCoMNwOFIodQq5gimX6yiif7VLOOMLJtv6/5lUfxkGJRcm7ZnJn5H0pe2Zs2HHobzbWybPMpxl2C6TMuIKRelK3pZ7yufyniPBXQHY29gznKiMXOEyQ07HYOPI+Z7jRAb3lO+xs2ntpVTEmz63FzC79p/A/AQt6dOCCmVuZHN0cmVhbQplbmRvYmoKMSAwIG9iago8PC9UYWJzL1MvR3JvdXA8PC9TL1RyYW5zcGFyZW5jeS9UeXBlL0dyb3VwL0NTL0RldmljZVJHQj4+L0NvbnRlbnRzIDMgMCBSL1R5cGUvUGFnZS9SZXNvdXJjZXM8PC9Db2xvclNwYWNlPDwvQ1MvRGV2aWNlUkdCPj4vUHJvY1NldCBbL1BERiAvVGV4dCAvSW1hZ2VCIC9JbWFnZUMgL0ltYWdlSV0vRm9udDw8L0YxIDIgMCBSPj4+Pi9QYXJlbnQgNCAwIFIvUm90YXRlIDkwL01lZGlhQm94WzAgMCA2MTIgNzkyXT4+CmVuZG9iago1IDAgb2JqClsxIDAgUi9YWVogMCA2MjIgMF0KZW5kb2JqCjIgMCBvYmoKPDwvU3VidHlwZS9UeXBlMS9UeXBlL0ZvbnQvQmFzZUZvbnQvSGVsdmV0aWNhL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZz4+CmVuZG9iago0IDAgb2JqCjw8L0tpZHNbMSAwIFJdL1R5cGUvUGFnZXMvQ291bnQgMS9JVFhUKDIuMS43KT4+CmVuZG9iago2IDAgb2JqCjw8L05hbWVzWyhKUl9QQUdFX0FOQ0hPUl8wXzEpIDUgMCBSXT4+CmVuZG9iago3IDAgb2JqCjw8L0Rlc3RzIDYgMCBSPj4KZW5kb2JqCjggMCBvYmoKPDwvTmFtZXMgNyAwIFIvVHlwZS9DYXRhbG9nL1BhZ2VzIDQgMCBSL1ZpZXdlclByZWZlcmVuY2VzPDwvUHJpbnRTY2FsaW5nL0FwcERlZmF1bHQ+Pj4+CmVuZG9iago5IDAgb2JqCjw8L01vZERhdGUoRDoyMDE4MDYyMjExMjQyMi0wNicwMCcpL0NyZWF0b3IoSmFzcGVyUmVwb3J0cyBMaWJyYXJ5IHZlcnNpb24gNi4zLjApL0NyZWF0aW9uRGF0ZShEOjIwMTgwNjIyMTEyNDIyLTA2JzAwJykvUHJvZHVjZXIoaVRleHQgMi4xLjcgYnkgMVQzWFQpPj4KZW5kb2JqCnhyZWYKMCAxMAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDA1MDEgMDAwMDAgbiAKMDAwMDAwMDc4NyAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDA4NzUgMDAwMDAgbiAKMDAwMDAwMDc1MiAwMDAwMCBuIAowMDAwMDAwOTM4IDAwMDAwIG4gCjAwMDAwMDA5OTIgMDAwMDAgbiAKMDAwMDAwMTAyNCAwMDAwMCBuIAowMDAwMDAxMTI3IDAwMDAwIG4gCnRyYWlsZXIKPDwvSW5mbyA5IDAgUi9JRCBbPGRjNzM0ZDIxZGM4MzE2YjI0Yjc0Y2UzNzg0Y2U3OGE4PjxjNzk5ODBiZTcwOThkMTg0ZGZkNTdmM2E1MTVlZGU2NT5dL1Jvb3QgOCAwIFIvU2l6ZSAxMD4+CnN0YXJ0eHJlZgoxMjk0CiUlRU9GCg\u003d\u003d";

    WebViewer({
      path: 'WebViewer/lib', // path to the PDF.js Express'lib' folder on your server
      licenseKey: 'Insert commercial license key here after purchase',
      // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
    }, document.getElementById('viewer'))
    .then(instance => {
      instance.UI.loadDocument(base64ToBlob(myBase64String), { filename: 'myfile.pdf' });
      const { documentViewer } = instance.Core;
      documentViewer.addEventListener('documentLoaded', () => {
        // perform document operations
      });
    });

    function base64ToBlob(base64) {
      const binaryString = window.atob(base64);
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; ++i) {
        bytes[i] = binaryString.charCodeAt(i);
      }
    
      return new Blob([bytes], { type: 'application/pdf' });
    };
  </script>
</body>
</html>
2

Hi there,

Thank you for contacting pdf.js express forums,

Could you please share a screenshot of any console error messages/failed network requests if any?

Usually if there is a nested iframes/components this means that the constructor path to the lib files is not correct and looking at the network panel there may be failed requests to those files.

Best regards,
Kevin Kim

3

Solved, I just realized that path: 'WebViewer/lib', iniside WebViewer object is not a reference, just a real path, so changing it to ‘lib’ because my ‘lib’ folder is in the website root, it works fine.
Thank you so much.