vue-book-reader
v1.0.8
Published
vue-book-reader is a vue wrapper for [foliate-js](https://github.com/johnfactotum/foliate-js) - library for rendering e-books in the browser. Supports EPUB, MOBI, KF8 (AZW3), FB2, CBZ, PDF (experimental; requires PDF.js), or add support for other formats
Downloads
36
Maintainers
Readme
vue-book-reader - an easy way to embed a reader into your webapp
vue-book-reader is a vue wrapper for foliate-js - library for rendering e-books in the browser. Supports EPUB, MOBI, KF8 (AZW3), FB2, CBZ, PDF (experimental; requires PDF.js), or add support for other formats yourself by implementing the book interface
Basic usage
npm install vue-book-reader --save
And in your vue-component...
<template>
<div style="height: 100vh">
<vue-reader url="/files/啼笑因缘.epub" />
</div>
</template>
<script setup>
import { VueReader } from 'vue-book-reader'
</script>
VueReader Attributes
| Name | Description | Type | Default |
| -------- | --------------------------------- | ---------------------- | ----------- |
| url | book url or File | string
/File
| — |
| location | set / update location of the book | string
/number
| — |
| title | the title of the book | string
| — |
| showToc | whether to show the toc | boolean
| true |
VueReader Slots
| Name | Description | | -------- | ----------------------------------------------------------------------------------- | | title | You have access to title by slot |
Recipes and tips
custom css
<template>
<vue-reader url="/files/梵高手稿.epub" :getRendition="getRendition">
</vue-reader>
</template>
<script setup>
import VueReader from 'vue-book-reader'
import { ref } from 'vue'
const getCSS = (style) => [
`
html {
background: #000;
color: #fff;
}`,
]
const getRendition = async (rendition) => {
const { book, renderer } = rendition
renderer.setStyles(getCSS())
}
</script>
Display a scrolled epub-view
<template>
<div style="height: 100vh">
<VueReader url="/files/啼笑因缘.mobi":getRendition="getRendition"/>
</div>
</template>
<script setup>
import VueReader from 'vue-book-reader'
const getRendition =(view)=>{
//scrolled or paginated
view?.renderer.setAttribute('flow', 'scrolled')
}
</script>
Import file
<template>
<div
style="height: 100vh; position: relative"
:style="{ height: url ? '100vh' : '50px' }"
>
<vue-reader v-if="url" :url="url" />
<input class="input" type="file" accept=".epub,.mobi,.azw3,.FB2,.CBZ,.PDF" @change="onchange" />
</div>
</template>
<script setup>
import VueReader from 'vue-book-reader'
import { ref } from 'vue'
const url = ref('')
const onchange = (e) => {
const file = e.target.files[0]
url.value = file
}
</script>
Current progress
<template>
<div style="height: 100vh; position: relative">
<vue-reader
url="/files/啼笑因缘.azw3"
:getRendition="getRendition"
@update:location="locationChange"
>
</vue-reader>
<div class="progress">
<input
type="number"
:value="current"
:min="0"
:max="100"
step="1"
@change="change"
/>%
<input
type="range"
:value="current"
:min="0"
:max="100"
:step="1"
@change="change"
/>
</div>
</div>
</template>
<script setup>
import VueReader from 'vue-book-reader'
import { ref } from 'vue'
let view = null
const current = ref(0)
const change = (e) => {
const value = e.target.value
current.value = value
view.goToFraction(parseFloat(value / 100))
}
const getRendition = (val) => (view = val)
const locationChange = (detail) => {
const { fraction } = detail
const percent = Math.floor(fraction * 100)
current.value = percent
}
</script>
<style>
.progress {
position: absolute;
bottom: 1rem;
right: 1rem;
left: 1rem;
z-index: 1;
color: #000;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.progress > input[type='number'] {
text-align: center;
}
.progress > input[type='range'] {
width: 100%;
}
</style>
Get book information
<template>
<vue-reader
url="/files/啼笑因缘.azw3"
:getRendition="getRendition"
v-show="false"
>
</vue-reader>
<div v-if="information" style="color: #000">
<img
:src="information.cover"
:alt="information.title"
style="width: 100px"
/>
<p>标题:{{ information.title }}</p>
<p>作者:{{ information.author }}</p>
<p>出版社:{{ information.publisher }}</p>
<p>语言:{{ information.language }}</p>
<p>出版日期:{{ information.published }}</p>
<p>介绍:{{ information.description }}</p>
</div>
</template>
<script setup>
import VueReader from 'vue-book-reader'
import { ref } from 'vue'
const information = ref(null)
const getRendition = (rendition) => {
const { book } = rendition
const { author } = book.metadata
const bookAuthor =
typeof author === 'string'
? author
: author
?.map((author) => (typeof author === 'string' ? author : author.name))
?.join(', ') ?? ''
information.value = { ...book.metadata, author: bookAuthor }
book.getCover?.().then((blob) => {
information.value.cover = URL.createObjectURL(blob)
})
}
</script>