syidaxdesign system
Home Pricing Settings
ComponentsData display

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.
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>

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-pdf-viewer>

Properties

Attribute / PropertyTypeDefaultDescription
string''PDF file URL.
string'document.pdf'Download filename and accessible label. Spec name: `file-name`.
number1Current page number, starting at 1.
number100Zoom percentage, limited to 25–400.
string'640px'Height as a CSS length or a numeric string interpreted as pixels.
booleantrueShow the toolbar above the viewer. Spec name: `show-toolbar`.
booleantrueExpose the download action.
booleantrueExpose the print action.
booleantrueExpose the fullscreen toggle.
string'PDF preview is not available in this browser.'Fallback message shown when the browser cannot render the PDF natively. Spec name: `fallback-text`.
string'No PDF selected'Empty-state text when `src` is not provided. Spec name: `empty-text`.

Events

EventDetailDescription
CustomEvent<{ src: string }>Read the result from the event's detail.
CustomEvent<{ src: string }>Read the result from the event's detail.
CustomEvent<{ page: number }>Read the result from the event's detail.
CustomEvent<{ zoom: number }>Read the result from the event's detail.
CustomEvent<{ active: boolean }>Read the result from the event's detail.

Methods

MethodReturnsDescription
Promise<void>Change the PDF page, limited to 1 or higher.
Promise<void>Change the PDF zoom level within 25–400%.
Promise<void>Reload the current PDF.
Promise<void>Open the PDF in a new window for printing.
Promise<void>Request native fullscreen on the viewer host.
Promise<void>Restore the window to its original size.
Promise<void>Toggle between fullscreen and restored.

Slots

SlotDescription
Content displayed in the empty area.
Design SystemTab Navigate Enter Open