docs: readme

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
+
+<script src="https://unpkg.com/vue-pdf-viewer"></script>
+
+```
+
+  
+
+## Usage
+
+  
+
+```vue
+
+<template>
+  <div>
+    <h1>File</h1>
+
+    <PDFViewer
+      :source="url"
+      style="height: 100vh; width: 100vw"
+      @download="handleDownload"
+    />
+
+    <h1>Base64</h1>
+
+    <PDFViewer
+      :source="base64"
+      style="height: 100vh; width: 100vw"
+      @download="handleDownload"
+    />
+  </div>
+
+</template>
+
+<script>
+import PDFViewer from 'vue-pdf-viewer'
+
+// OR THE FOLLOWING IMPORT FOR VUE 2
+// import PDFViewer from 'vue-pdf-viewer/dist/vue2-pdf-viewer'
+
+export default {
+  components: {
+    PDFViewer,
+  },
+
+  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   |
+  |          |            |                                                                                                                 |                    |
+
+
+  
+
+### 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.

src/PDFViewer.vue

@@ -49,6 +49,7 @@
         @loaded="handleLoaded"
         @loading-failed="handleLoadingFailed"
         @rendered="handleDocumentRender"
+        @rendering-failed="handleRenderFailed"
       />
     </div>
   </div>
@@ -73,10 +74,10 @@ export default {
         return [
           'download',
           'print',
-          'double',
+          'double', // TODO
-          'fullscreen',
+          'fullscreen', // TODO
-          'abort',
+          'abort', // TODO
-          'fullpage',
+          '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()
     },