https://github.com/avipunes/file-viewer

Web component file viewer
https://github.com/avipunes/file-viewer

html javascript svelte webcomponents

Last synced: 3 months ago
JSON representation

Web component file viewer

• Host: GitHub
• URL: https://github.com/avipunes/file-viewer
• Owner: avipunes
• License: mit
• Created: 2019-12-15T21:49:20.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-12T10:22:41.000Z (10 months ago)
• Last Synced: 2024-10-19T14:44:02.467Z (4 months ago)
• Topics: html, javascript, svelte, webcomponents
• Language: JavaScript
• Size: 207 KB
• Stars: 37
• Watchers: 3
• Forks: 6
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-components - `<file-viewer>` - Web component built with Svelte to view files. (Real World / Components)

README

        
# File Viewer

This is a custom element ([web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) - can be used every where regardless the framework) built with [Svelte](https://svelte.dev/) to view files. [Demo](https://avipunes.github.io/file-viewer/)

## Usage

`url` - File link.

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

```html

```

```html

    


        😕

    


```

### 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:

-   [React](https://codesandbox.io/s/tender-platform-rlxs1)

-   [Vue](https://codesandbox.io/s/tender-platform-rlxs1)

-   [Angular](https://codesandbox.io/s/dreamy-goldstine-e9pso)

-   [Vanilla](https://codesandbox.io/s/vigorous-moon-ghy8w)