asset-attributes.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pdfjs-viewer-element | Static file attributes demo</title>
    <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <!--
      Build the package before serving this demo over HTTP.
      Each runtime file URL is supplied independently, without assets-base.
      Replace these URLs with your static pipeline's eg. content-hashed URLs.
      Use files from the same package release and set attributes before connection.

      For example for Django ManifestStaticFilesStorage, copy dist into static/pdfjs/,
      run collectstatic and use the following in a Django template:

      {% load static %}
      <script type="module" src="{% static 'pdfjs/pdfjs-viewer-element.js' %}"></script>
      <pdfjs-viewer-element
        src="/file.pdf"
        pdfjs-lib-src="{% static 'pdfjs/pdf.mjs' %}"
        viewer-src="{% static 'pdfjs/viewer.mjs' %}"
        worker-src="{% static 'pdfjs/pdf.worker.min.mjs' %}"
        renderer-src="{% static 'pdfjs/pdf.renderer.min.mjs' %}"
        viewer-css-src="{% static 'pdfjs/viewer.css' %}"
        theme-css-src="{% static 'pdfjs/paper-and-ink.css' %}"
        style="height: 100dvh">
      </pdfjs-viewer-element>

      renderer-src is only used when worker rendering is turned on (see worker-rendering.html).

      Resources loaded by directory and filename, such as annotation icons, CMaps,
      fonts, WASM and the scripting sandbox, default to the folders next to
      viewer-src and pdfjs-lib-src. Keep their original filenames available there,
      or set their resource path attributes.
      For a separate static host, configure module script CORS and the page's CSP.
    -->
    <pdfjs-viewer-element
      src="/public/sample-pdf-with-images.pdf"
      pdfjs-lib-src="../dist/pdf.mjs"
      viewer-src="../dist/viewer.mjs"
      worker-src="../dist/pdf.worker.min.mjs"
      renderer-src="../dist/pdf.renderer.min.mjs"
      viewer-css-src="../dist/viewer.css"
      theme-css-src="../dist/paper-and-ink.css"
      style="height: 100dvh">
    </pdfjs-viewer-element>
  </body>
</html>