@spinacia_/file-viewer NPM

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