feat: default settings prop
丁锐
parent
79b598315f
commit
93625e201e
69
README.md
69
README.md
|
|
@ -1,58 +1,36 @@
|
|||
# 📄 pdf-viewer-vue
|
||||
|
||||
|
||||
|
||||
PDF viewer component for Vue 2 and Vue 3
|
||||
|
||||
[](https://npmjs.com/package/pdf-viewer-vue) [](https://npmjs.com/package/pdf-viewer-vue) [](https://github.com/DingRui12138/vue-pdf-viewer) [](https://github.com/DingRui12138/vue-pdf-viewer/blob/master/LICENSE)
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
This package is compatible with both Vue 2 and Vue 3. The default exported build is for Vue 3, but `dist` directory also contains a build for Vue 2 (`dist/vue2-pdf-viewer.js`). See the example in [Usage](#usage) section.
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
|
||||
Depending on the environment, the package can be installed in one of the following ways:
|
||||
|
||||
|
||||
|
||||
```shell
|
||||
|
||||
npm install pdf-viewer-vue
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
```shell
|
||||
|
||||
yarn add pdf-viewer-vue
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
<script src="https://unpkg.com/pdf-viewer-vue"></script>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
|
||||
```vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>File</h1>
|
||||
|
|
@ -71,7 +49,6 @@ yarn add pdf-viewer-vue
|
|||
@download="handleDownload"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -86,59 +63,41 @@ export default {
|
|||
},
|
||||
|
||||
data() {
|
||||
|
||||
return {
|
||||
url: '<PDF_URL>',
|
||||
base64: '<BASE64_ENCODED_PDF>',
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Props
|
||||
|
||||
| Name | Type | Accepted values | Description |
|
||||
| -------------- | ---------- | --------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||
| source | `string` | document `URL` or `Base64` | source of document |
|
||||
| controls | `string[]` | `[`<br/>`'download',`<br/>`'print',`<br/>`'rotate',`<br/>`'zoom',`<br/>`'catalog',`<br/>`'switchPage',`<br/>`]` | visible controls |
|
||||
| loading-text | `string` | - | loading text |
|
||||
| rendering-text | `string` | - | rendering text |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| Name | Type | Accepted values | Description |
|
||||
| -------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||
| source | `string` | document `URL` or `Base64` | source of document |
|
||||
| controls | `string[]` | `[`<br/>`'download',`<br/>`'print',`<br/>`'rotate',`<br/>`'zoom',`<br/>`'catalog',`<br/>`'switchPage',`<br/>`]` | visible controls |
|
||||
| loading-text | `string` | - | loading text |
|
||||
| rendering-text | `string` | - | rendering text |
|
||||
| settings | `{ defaultZoom: number }` | - | default settings |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
| Name | Value | Description |
|
||||
| ---------------- | ------------------------------------- | ------------------------------- |
|
||||
| download | `{source: string; filename: string;}` | pdf file base info |
|
||||
| loaded | `{total: number}` | document load completed |
|
||||
| loading-failed | `Error` | failed to load document |
|
||||
| rendered | - | finished rendering the document |
|
||||
| rendering-failed | `Error` | failed to render document |
|
||||
|
||||
|
||||
|
||||
| Name | Value | Description |
|
||||
| ---------------- | ------------------------------------- | ------------------------------- |
|
||||
| download | `{source: string; filename: string;}` | pdf file base info |
|
||||
| loaded | `{total: number}` | document load completed |
|
||||
| loading-failed | `Error` | failed to load document |
|
||||
| rendered | - | finished rendering the document |
|
||||
| rendering-failed | `Error` | failed to render document |
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
```
|
||||
TODO: CodeSandbox or JSFiddle
|
||||
```
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
|
||||
|
||||
MIT License. Please see [LICENSE file](LICENSE) for more information.
|
||||
11
demo/App.vue
11
demo/App.vue
File diff suppressed because one or more lines are too long
|
|
@ -60,6 +60,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import controls, { CATALOG } from './constants/controls'
|
||||
import './assets/iconfont/iconfont.css'
|
||||
import Viewer from './components/Viewer/Viewer.vue'
|
||||
import ViewerPageSelector from './components/ViewerPageSelector.vue'
|
||||
|
|
@ -74,18 +75,7 @@ export default {
|
|||
controls: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
'download',
|
||||
'print',
|
||||
'double', // TODO
|
||||
'fullscreen', // TODO
|
||||
'abort', // TODO
|
||||
'fullpage', // TODO
|
||||
'rotate',
|
||||
'zoom',
|
||||
'catalog',
|
||||
'switchPage',
|
||||
]
|
||||
return controls
|
||||
},
|
||||
},
|
||||
loadingText: {
|
||||
|
|
@ -96,6 +86,10 @@ export default {
|
|||
type: String,
|
||||
default: 'Rendering',
|
||||
},
|
||||
settings: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Viewer,
|
||||
|
|
@ -164,6 +158,10 @@ export default {
|
|||
},
|
||||
deep: true,
|
||||
},
|
||||
mounted() {
|
||||
this.zoom = this.settings.defaultZoom || 100
|
||||
this.catalogVisible = this.controls.includes(CATALOG)
|
||||
},
|
||||
methods: {
|
||||
handleDownload() {
|
||||
this.$emit('download', {
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ export default {
|
|||
viewerStyle() {
|
||||
return {
|
||||
// height: `${this.zoom / NORMAL_RATIO}%`,
|
||||
width: `${(this.zoom / NORMAL_RATIO / 100) * this.viewportWidth}px`,
|
||||
width: `${(this.zoom / NORMAL_RATIO / 100) * this.viewportWidth - 40}px`,
|
||||
transform: `rotate(${this.rotate}deg)`,
|
||||
}
|
||||
},
|
||||
|
|
@ -159,6 +159,9 @@ export default {
|
|||
}
|
||||
: {}
|
||||
},
|
||||
verticalPadding() {
|
||||
return (this.viewportWidth / this.viewportHeight) * 0
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isFullpage(n, o) {
|
||||
|
|
@ -185,6 +188,16 @@ export default {
|
|||
this.render()
|
||||
},
|
||||
},
|
||||
catalogVisible(n, o) {
|
||||
if (n !== o) {
|
||||
this.viewportWidth = n ? this.viewportWidth - 300 : this.viewportWidth + 300
|
||||
}
|
||||
// setTimeout(() => {
|
||||
// this.$nextTick(() => {
|
||||
// this.handleResize()
|
||||
// })
|
||||
// }, 500)
|
||||
},
|
||||
},
|
||||
activated() {
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -214,7 +227,8 @@ export default {
|
|||
contentWindow.print()
|
||||
},
|
||||
updateZoomFullpage() {
|
||||
const perViewerHeight = this.viewerContentHeight / this.total
|
||||
const perViewerHeight =
|
||||
(this.viewerContentHeight - this.verticalPadding) / this.total
|
||||
const rate = this.viewportHeight / (perViewerHeight - MARGIN_OFFSET)
|
||||
|
||||
this.$emit('update:zoom', this.zoom * rate)
|
||||
|
|
@ -223,7 +237,9 @@ export default {
|
|||
handleViewerScroll(evt) {
|
||||
this.isScrolling = true
|
||||
const yOffset = evt.target.scrollTop
|
||||
const perHeight = (this.viewerContentHeight + MARGIN_OFFSET) / this.total
|
||||
const perHeight =
|
||||
(this.viewerContentHeight + MARGIN_OFFSET - this.verticalPadding) /
|
||||
this.total
|
||||
const halfViewportOffset = (perHeight - this.viewportHeight) / 2
|
||||
|
||||
const currentPosition = (yOffset - halfViewportOffset) / perHeight + 1
|
||||
|
|
@ -299,6 +315,9 @@ export default {
|
|||
const image = document.createElement('img')
|
||||
image.className = 'placeholder'
|
||||
image.src = URL.createObjectURL(blobData.blob)
|
||||
image.onload = e => {
|
||||
e.target.naturalWidth
|
||||
}
|
||||
|
||||
return image
|
||||
}
|
||||
|
|
@ -334,6 +353,10 @@ export default {
|
|||
this.$emit('rendered')
|
||||
this.$emit('update:isRendering', false)
|
||||
|
||||
if (this.settings?.isFullWidth) {
|
||||
this.$emit('update:zoom', 200)
|
||||
}
|
||||
|
||||
await this.$nextTick()
|
||||
this.viewerContentHeight = this.$refs.viewerContent.clientHeight
|
||||
} catch (e) {
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@ export const SWITCH_PAGE = 'switchPage'
|
|||
export default [
|
||||
DOWNLOAD,
|
||||
PRINT,
|
||||
DOUBLE,
|
||||
FULLSCREEN,
|
||||
ABOUT,
|
||||
FULLPAGE,
|
||||
DOUBLE, // TODO
|
||||
FULLSCREEN, // TODO
|
||||
ABOUT, // TODO
|
||||
FULLPAGE, // TODO
|
||||
ROTATE,
|
||||
ZOOM,
|
||||
CATALOG,
|
||||
|
|
|
|||
Loading…
Reference in New Issue