file-viewer

This is a custom element (web component - can be used every where regardless the framework) built with Svelte to view files. Demo

Usage no npm install needed!

<script type="module">
  import fileViewer from 'https://cdn.skypack.dev/file-viewer';
</script>

README

File Viewer

This is a custom element (web component - can be used every where regardless the framework) built with Svelte to view files. Demo

Usage

url - File link.

filename - the file name - should include the file extension.

<file-viewer
    filename="some-excel-file.xlsx"
    url="https://link.com"
></file-viewer>

<file-viewer
    filename="some-not-supported-file.not-supported"
    url="https://link.com"
>
    <div slot="not-supported">
        😕
    </div>
</file-viewer>

Available slot:

  • not-supported - Given file extension is not supported.

Available events:

  • onload - iframe onload event.

Supported File Extensions

.ppt, .pptx, .doc, .docx, .xls, .xlsx, .pdf, .png, .jpg, .jpeg, .gif,

Examples: