@spinacia_/file-viewer/README.md

A file viewer component.

## Introduction

A file viewer component in Typescript. The file type is detected by checking
the magic number.

## Installation

```
npm install @spinicia_/file-viewer
```

```
pnpm add @spinacia_/file-viewer
```

## Usage

```
<script setup lang="ts">
import { ref } from 'vue'
import { FileViewer } from '@spinacia_/file-viewer/dist'
import '@spinacia_/file-viewer/dist/style.css'

import testUrl from '@/assets/files/testFile.pdf?url'

const sourceData = ref<Response>()

const loadFile = async () => {
  fetch(testUrl).then((res: Response) => {
    sourceData.value = res
  }
}

// const clearFile = () => { sourceData.value = undefined }
</script>

<template>
  <button @click="loadFile">Load file</button>
  <FileViewer :res="sourceData" class="viewer-container" />
</template>

<style scoped>
.viewer-container {
  width: 60vw;
  height: 80vh;
}
</style>
```

or specify the type in props:

```
<script setup lang="ts">
import { ref } from 'vue'
import { FileViewer, readFileTypeFromBlob } from '@spinacia_/file-viewer/dist'
import '@spinacia_/file-viewer/dist/style.css'

import testUrl from '@/assets/files/testFile.pdf?url'

const blobData = ref<Blob>()
const type = ref<string>()

const loadFile = async () => {
  fetch(testUrl).then(async (res: Response) => {
    const blob = await res.clone().blob()
    type.value = (await readFileTypeFromBlob(blob)).ext
    blobData.value = blob
  }
}

// const clearFile = () => { blobData.value = undefined }
</script>

<template>
  <button @click="loadFile">Load file</button>
  <FileViewer :blob="blobData" :type="type" />
</template>
```

and all supported types can be checked in XXX_TYPE variables:

```
import { Image_Type, Pdf_Type, Text_Type, Excel_Type, Word_Type } from '@spinacia_/file-viewer/dist'
```

## Props

| name               | default                  | type                                         | description                                                                                                   |
|--------------------|:-------------------------|----------------------------------------------|---------------------------------------------------------------------------------------------------------------|
| `ref`              | `undefined`              | `Response`                                   | file source data                                                                                              |
| `blob`             | `undefined`              | `Blob`                                       | file source data                                                                                              |
| `type`             | `undefined`              | `string`                                     | if the file type is not passed in props, its type will be automatically detected by checking the magic number |
| `change`           | `false`                  | `boolean`                                    | if true, the image can be zoomed, dragged and rotated, the pdf can be zoomed                                  |
| `fit`              | `contain`                | `contain`/`cover`/`fill`/`none`/`scale-down` | indicate how the image should be resized to fit its container, same as object-fit                             |
| `watermark`        | `undefined`              | `string`                                     | label of watermark which will be shown in pdf                                                                 |
| `watermarkProps`   | `{}`                     | `Object`                                     | watermark options                                                                                             |
| `pagination`       | `undefined`              | `number`                                     | item count of each page in pdf pagination                                                                     |
| `download`         | `false`                  | `boolean`                                    | if true, the pdf file can be downloaded                                                                       |
| `filename`         | `undefined`              | `string`                                     | filename of pdf file, which will be used in download function                                                 |
| `scrollColor`      | `rgba(150,150,150,0.15)` | `string`                                     | color of -webkit-scrollbar-thumb                                                                              |
| `scrollHoverColor` | `rgba(150,150,150,0.3)`  | `string`                                     | color of -webkit-scrollbar-thumb:hover                                                                        |

## Supported file types

- images: `.jpg` `.png` `.gif` `.bmp` `.webp` `.svg`
- word: `.docx`
- pdf: `.pdf`
- plain text: `.txt`