PDF.js 'Hello, world!' example

by samu_eyes

HTML

<script src="//mozilla.github.io/pdf.js/build/pdf.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>

<script type="module">
  // If absolute URL from the remote server is provided, configure the CORS
  // header on that server.
  var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';

  // Loaded via <script> tag, create shortcut to access PDF.js exports.
  var { pdfjsLib } = globalThis;

  // The workerSrc property shall be specified.
  pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.mjs';

  // Asynchronous download of PDF
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    console.log('PDF loaded');

    // Fetch the first page
    var pageNumber = 1;
    pdf.getPage(pageNumber).then(function(page) {
      console.log('Page loaded');

      var scale = 1.5;
      var viewport = page.getViewport({scale: scale});

      // Prepare Fabric.js canvas using PDF page dimensions
      var fabricCanvas = new fabric.Canvas('the-canvas');
      fabricCanvas.setWidth(viewport.width);
      fabricCanvas.setHeight(viewport.height);

      // Create an empty Fabric.js image
      var img = new fabric.Image();

      // Prepare a regular canvas for PDF.js to render into
      var tempCanvas = document.createElement('canvas');
      tempCanvas.width = viewport.width;
      tempCanvas.height = viewport.height;
      var tempContext = tempCanvas.getContext('2d');

      // Render PDF page into the temporary canvas context
      var renderContext = {
        canvasContext: tempContext,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);
      renderTask.promise.then(function() {
        console.log('Page rendered');

        // Once the PDF is rendered, set the Fabric.js image to the content of the temporary canvas
       ...

CSS

#the-canvas {
  border: 1px solid black;
  direction: ltr;
}