PDF Viewer

PRO

View PDF documents inline with page navigation, zoom, and download controls.

<sy-pdf-viewer>Installation guide Basic usage

Live preview

Interact with the component to see results here.

PageZoom level

ToolbarDownloadPrintFullscreen

View code

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  page="1"
  zoom="100"
  show-toolbar
  downloadable
  printable
  fullscreenable
  id="sample"
></sy-pdf-viewer>

Usage guide

Let users view PDFs directly within a page using the browser's built-in PDF viewer.

File and viewing area: Set src to an accessible PDF URL, set fileName, and provide enough container height. The example below uses a two-page document.
Pages and zoom: setPage() accepts 1 or higher; setZoom() accepts 25–400.
Document tools: Configure download, print, and fullscreen options for your use case.

Examples

PDF document

Display a document with its toolbar.

View code

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  id="sample"
></sy-pdf-viewer>

Page and zoom controls

Call page and zoom methods from your app's actions.

View code

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  id="sample"
></sy-pdf-viewer>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Page 2</sy-button>
  <sy-button id="action-1" size="small">125%</sy-button>
  <sy-button id="action-2" size="small">Refresh</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setPage(2);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setZoom(125);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.reload();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Focus on the document

The toolbar can be omitted.

View code

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  show-toolbar="false"
  id="sample"
></sy-pdf-viewer>

No document

Show instructions when src is empty.

View code

HTML

<sy-pdf-viewer
  src=""
  file-name="syidax-guide.pdf"
  height="380px"
  empty-text="Select a PDF to view."
  id="sample"
></sy-pdf-viewer>

Fullscreen

Call this within a user button-click handler.

View code

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  id="sample"
></sy-pdf-viewer>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Fullscreen</sy-button>
  <sy-button id="action-1" size="small">Original size</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setFullScreen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setRestore();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  page="1"
  zoom="100"
  show-toolbar
  downloadable
  printable
  fullscreenable
  id="sample"
></sy-pdf-viewer>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["loaded", "failed", "pageChanged", "zoomChanged", "fullscreenChanged"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Instructions when no file is selected

The empty slot provides instructions before a document is selected. Set src to display a document.

View code

HTML

<sy-pdf-viewer height="280px">
  <div slot="empty"><strong>Select a document.</strong>
    <p>Connect a PDF file to view it here.</p>
  </div>
</sy-pdf-viewer>

Reading toolbar

Keep page and zoom controls while hiding download and print actions.

View code

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  page="1"
  zoom="100"
  show-toolbar
  downloadable="false"
  printable="false"
  fullscreenable
  id="sample"
></sy-pdf-viewer>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "downloadable": false,
    "printable": false
  });
</script>

Feature examples

Choose a feature from 24 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.