Creare l'anteprima di un file PDF scelto per l'upload con JavaScript

In questo articolo vedremo come creare l'anteprima di un file PDF scelto per l'upload utilizzando la libreria PDF.js. Si tratta di una soluzione interoperabile e compatibile con vari scenari.

Partiamo da questa struttura HTML:

         <form class="upload-form" action="#" method="post">
            <div>
                <label for="pdf">Upload PDF</label>
                <div class="input-wrapper">
                    <input type="file" name="pdf" id="pdf" accept="application/pdf">
                </div>
            </div>
            
        </form>
        <div id="pdf-preview-wrapper">
                <button type="button" id="pdf-preview-close">&times;</button>
                <canvas id="pdf-preview"></canvas>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
        <script src="script.js"></script>

Con PDF.js dobbiamo convertire l'oggetto File in un oggetto URL contenente i byte del file PDF scelto. Quindi possiamo inserire nel canvas l'anteprima della prima pagina del documento.

function handleFile(input, wrapper, preview) {
    input.addEventListener('change', async (e) => {

      wrapper.classList.remove('visible');
      document.body.classList.remove('preview-visible');

      const file = e.target.files[0];
      if (!file) return;

      const fileURL = URL.createObjectURL(file);

      
      const pdf = await pdfjsLib.getDocument(fileURL).promise;

      
      const page = await pdf.getPage(1);

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

      preview.width = viewport.width;
      preview.height = viewport.height;

      const ctx = preview.getContext('2d');

      const renderContext = {
        canvasContext: ctx,
        viewport: viewport,
      };

      wrapper.classList.add('visible');
      document.body.classList.add('preview-visible');

      await page.render(renderContext).promise;
    });
  }

Ovviamente poiché stiamo gestendo un elemento canvas possiamo ridimensionare l'anteprima per adattarla al contenitore usando la larghezza e l'altezza della viewport con la variabile scale che controlla l'aspect ratio dell'anteprima finale.

Demo

JavaScript PDF Upload Preview

Conclusione

PDF.js è un'ottima soluzione per gestire la visualizzazione dei documenti PDF nel browser. In questo caso si rivela particolarmente indicata per gestire un form di upload.