Generate PDF Reports

import { LitElement, html, css, PropertyValues } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import * as pdfjsLib from 'pdfjs-dist';

pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( 1
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).href;

@customElement('pdf-viewer')
export class PdfViewer extends LitElement {
  static styles = css`
    :host {
      display: block;
      overflow: auto;
      background: var(--lumo-contrast-90pct, #525659);
      font-family: var(--lumo-font-family, sans-serif);
    }
    canvas {
      display: block;
      margin: var(--lumo-space-s, 8px) auto;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    .error {
      color: var(--lumo-primary-contrast-color, white);
      padding: var(--lumo-space-m, 16px);
      text-align: center;
    }
    .truncated {
      color: var(--lumo-contrast-30pct, #ccc);
      padding: var(--lumo-space-m, 16px) var(--lumo-space-m, 16px) var(--lumo-space-l, 24px);
      text-align: center;
      font-size: var(--lumo-font-size-s, 14px);
    }
  `;

  @property() src = ''; 2
  @property({ type: Number, attribute: 'max-pages' }) maxPages = 50; 3
  @state() private _error = '';
  @state() private _truncated = false;
  @state() private _totalPages = 0;

  private _loadTask: ReturnType<typeof pdfjsLib.getDocument> | null = null;

  render() {
    if (this._error) {
      return html`<div class="error">${this._error}</div>`;
    }
    return html`
      <div id="pages"></div>
      ${this._truncated
        ? html`<div class="truncated">
            Showing ${this.maxPages} of ${this._totalPages} pages.
            Download the PDF to see the full document.
          </div>`
        : ''}
    `;
  }

  disconnectedCallback() { 4
    super.disconnectedCallback();
    if (this._loadTask) {
      this._loadTask.destroy();
      this._loadTask = null;
    }
  }

  protected updated(changed: PropertyValues) {
    if (changed.has('src') && this.src) {
      this._loadPdf();
    }
  }

  private async _loadPdf() {
    if (this._loadTask) {
      this._loadTask.destroy();
      this._loadTask = null;
    }

    this._error = '';
    this._truncated = false;
    this._totalPages = 0;
    await this.updateComplete;
    const container = this.shadowRoot!.querySelector('#pages') as HTMLDivElement;
    if (!container) return;
    container.innerHTML = '';

    try {
      this._loadTask = pdfjsLib.getDocument(this.src);
      const pdf = await this._loadTask.promise;

      this._totalPages = pdf.numPages;
      const pagesToRender = Math.min(pdf.numPages, this.maxPages);
      this._truncated = pdf.numPages > this.maxPages;

      const availableWidth = this.clientWidth - 32; 5

      for (let i = 1; i <= pagesToRender; i++) {
        const page = await pdf.getPage(i);
        const unscaled = page.getViewport({ scale: 1 });
        const scale = availableWidth > 0
          ? availableWidth / unscaled.width
          : 1.5;
        const viewport = page.getViewport({ scale });

        const canvas = document.createElement('canvas');
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        container.appendChild(canvas);

        await page.render({
          canvas,
          canvasContext: canvas.getContext('2d')!,
          viewport,
        }).promise;
      }
    } catch (err: any) {
      if (err?.name !== 'RenderingCancelledException') {
        this._error = `Failed to load PDF: ${err?.message || err}`;
      }
    }
  }
}

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.HasSize;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.server.streams.DownloadHandler;

@Tag("pdf-viewer")
@NpmPackage(value = "pdfjs-dist", version = "5.4.624") 1
@JsModule("./pdf-viewer.ts") 2
public class PdfViewer extends Component implements HasSize {

    public PdfViewer() {
    }

    public PdfViewer(DownloadHandler downloadHandler) {
        setSrc(downloadHandler);
    }

    public void setSrc(DownloadHandler downloadHandler) {
        getElement().setAttribute("src", downloadHandler); 3
    }

    public void setMaxPages(int maxPages) {
        getElement().setProperty("maxPages", maxPages); 4
    }
}

PdfViewer pdfViewer = new PdfViewer(
        DownloadHandler.fromInputStream(event -> {
            try {
                byte[] pdf = generateReport();
                return new DownloadResponse(
                        new ByteArrayInputStream(pdf),
                        "report.pdf",
                        "application/pdf",
                        pdf.length);
            } catch (Exception e) {
                return DownloadResponse.error(500);
            }
        }));
pdfViewer.setWidth("100%");
pdfViewer.setHeight("800px");

add(pdfViewer);