avipunes / file-viewer Goto Github PK

Web component file viewer

License: MIT License

CSS 9.87% HTML 32.32% JavaScript 38.89% Svelte 18.93%

file-viewer's Introduction

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:

file-viewer's People

Contributors

Stargazers

Watchers

Forkers

waelchateur acud1 nibyou tarentino76 tebareinyu

file-viewer's Issues

Failed to compile

I'm having an Issue on using this component.

Please help.

Can this only fetch files/images from the web or also files stored locally?

How can i reference files like pdf, docx stored locally?

Office files cannot be displayed

Hi, Does this library have a problem with Digital Ocean servers? Because my Office file is on the DO server it can't be displayed with the message "An error occurred
We're sorry, but for some reason we can't open this for you. "

However, only Office files cannot appear.

Is there a solution for that?

excel xlsx File extension is not supported.

import "file-viewer";
...file-viewer filename="filename" url="url"... // remove </ because of formatting

for some reason .xlsx is rendering as File extension is not supported. Please help to resolve this. There isnt any error in the console too.

how to import this into react

Hi, I have imported this to react app but due to the hypen it's showing an error.

import {file-viewer} from "file-viewer";

Please help on this. Thanks

GET http://localhost:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED

Hi there.
I added file-viewer to my React project and I keep getting this error:
GET http://localhost:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED
I went to the bundle.js file in the file viewer node modules and and I changed 'localhost" to my machine's dns ip address, then to 127.0.0.1, still get the same error.

https://www.office.com/redir.aspx?assetid=HA102724036

I can't load office file. Error message "An error occurred, We're sorry, but for some reason we can't open this for you."
when I open the link to learn more leads to https://www.office.com/redir.aspx?assetid=HA102724036

Size file

What is the maximum file size that can be displayed using this library?

How to load url dynamically in vue?

Hi @avipunes, In my application, I wanted to load file-viewer URL dynamically. Below is my code:

<file-viewer id="file-viewer" :filename="fileName" :url="src"
          style="overflow: auto; height: 600px;width: 750px; position: absolute;"></file-viewer>

This code is not working for a dynamic URL, like if I have 10 files in my directory and I wanted to load file one by one by clicking on the file. My code is generating a dynamic URL for each file, but unable to load.
Thanks!!

how to use in node js and express ejs?

hello
this module is what i wanted.
but i dont know how to import that(excualy require in node js)

And I use express and ejs(template engine)

React 17

For some reason this package does not work with react 17

it works with React 16 and CRA 3

codesandbox

p.s i'm using it with next.js by the way