diff --git a/README.md b/README.md new file mode 100644 index 0000000..2fbc57d --- /dev/null +++ b/README.md @@ -0,0 +1,144 @@ +# 📄 vue-pdf-viewer + + + +PDF viewer component for Vue 2 and Vue 3 + +``` +TODO: shields.io +``` + + + +## 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 vue-pdf-viewer + +``` + + + +```shell + +yarn add vue-pdf-viewer + +``` + + + +```html + + + +``` + + + +## Usage + + + +```vue + + + + + +``` + + + +### Props + + | Name | Type | Accepted values | Description | + | -------- | ---------- | --------------------------------------------------------------------------------------------------------------- | ------------------ | + | source | `string` | document `URL` or `Base64` | source of document | + | controls | `string[]` | `[`
`'download',`
`'print',`
`'rotate',`
`'zoom',`
`'catalog',`
`'switchPage',`
`]` | visible controls | + | | | | | + + + + +### 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 | + + + + +## Examples + + +``` +TODO: CodeSandbox or JSFiddle +``` + + + +## License + + + +MIT License. Please see [LICENSE file](LICENSE) for more information. \ No newline at end of file diff --git a/src/PDFViewer.vue b/src/PDFViewer.vue index aba2497..978fdba 100644 --- a/src/PDFViewer.vue +++ b/src/PDFViewer.vue @@ -49,6 +49,7 @@ @loaded="handleLoaded" @loading-failed="handleLoadingFailed" @rendered="handleDocumentRender" + @rendering-failed="handleRenderFailed" /> @@ -73,10 +74,10 @@ export default { return [ 'download', 'print', - 'double', - 'fullscreen', - 'abort', - 'fullpage', + 'double', // TODO + 'fullscreen', // TODO + 'abort', // TODO + 'fullpage', // TODO 'rotate', 'zoom', 'catalog', @@ -201,6 +202,9 @@ export default { handleLoadingFailed(e) { this.$emit('loading-failed', e) }, + handleRenderFailed(e) { + this.$emit('rendering-failed', e) + }, reload() { this.$refs.viewer.load() },