feat: default settings prop
This commit is contained in:
丁锐 committed
1 parent
79b598315f
commit
93625e201e
5 files changed
+61
-78
No files matched your search
@@ -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.
|
||||
+7
-4
@@ -8,7 +8,11 @@
|
||||
<button @click="handleSwitchUrl('base64')">switch base64</button>
|
||||
</div>
|
||||
<div style="height: calc(100vh - 30px); width: 80%; margin: 0 auto">
|
||||
<PDFViewer :source="pdfSource" @download="handleDownload" />
|
||||
<PDFViewer
|
||||
:source="pdfSource"
|
||||
@download="handleDownload"
|
||||
:settings="{ defaultZoom: 200 }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -17,8 +21,7 @@
|
||||
import PDFViewer from '../src/index.js'
|
||||
|
||||
const TEST_URL_MAP = {
|
||||
test1:
|
||||
'http://localhost:55703/1.pdf',
|
||||
test1: 'http://localhost:55703/1.pdf',
|
||||
test2:
|
||||
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
|
||||
base64: `data:application/octet-stream;base64,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 truncated
|
||||
@@ -30,7 +33,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pdfSource: TEST_URL_MAP.test1,
|
||||
pdfSource: TEST_URL_MAP.test2,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
+10
-12
@@ -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) {
|
||||
|
||||
Vendored
+4
-4
@@ -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,
|
||||
|
||||
Reference in new issue
Block a user